user15445 user15445 - 2 months ago 24
CSS Question

Not working css calc() in FireFox 29.0.1

<style>
.mapstyle {
height: 100%;
height: -webkit-calc(100% - 60px);
height: -moz-calc(100% - 60px);
height: calc(100% - 60px);
margin-left: 300px;
}
</style>

<div style="margin:0 auto; position:relative; text-align: left; width: 100%;">
<div style"width:100%;"><h1>HEADER</h1></div>
<div style="width: 300px; position: absolute; top: 100px; left: 0;">test</div>
<div id="map" class="mapstyle">
<script>....
var map = L.map('map').setView([57.3, 29.4],).setMaxBounds(bounds);
...//Leafletjs.com
</script>
</div>
</div>


function calc() in css not working in firefox 29.0.1, other browsers is working.

Answer

change first div

position:absolute; height:100%

http://jsfiddle.net/Dxn5d/2/

Comments