css - How to limit the map to the content box? -
as can see in following self-explaining example, background-clip property doesn't work #map.
<html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> <style> #rectangle { display: block; margin: 0px auto; width: 400px; height: 100px; padding: 20px; border: solid; background: orange; background-clip: content-box; } #map { margin: 0px auto; width: 400px; height: 100px; padding: 20px; border: solid; background-clip: content-box; } </style> </head> <body> <div id="rectangle">blablabla</div> <br /> <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> <div id="map"></div> <script> var map = l.map('map').setview([51.505, -0.09], 13); l.tilelayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">openstreetmap</a> contributors' }).addto(map); </script> </body> </html> is there similar? how can limit map content box?
thank much!
you can put map <div> container <div> make similar first box.
css:
#map { width: 100%; height: 100%; } #mapcontainer { margin: 0px auto; width: 400px; height: 100px; padding: 20px; border: solid; } html:
<div id="mapcontainer"> <div id="map"></div> </div> 
Comments
Post a Comment