Twitter Bootstrap: div in container with 100% height

css, height, twitter-bootstrap

Solution

Set the class `.fill` to `height: 100%`

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(I put a red background for `#map` so you can see it takes up 100% height)

Problem

Using twitter bootstrap (2), I have a simple page with a nav bar, and inside the `container` I want to add a div with 100% height (to the bottom of the screen). My css-fu is rusty, and I can't work this out. Simple HTML: ``` <body> <div class="navbar navbar-fixed-top"> <!-- Rest of nav bar chopped from here --> </div> <div class="container fill"> <div id="map"></div> <!-- This one wants to be 100% height --> </div> </body> ``` Current CSS: ``` #map { width: 100%; height: 100%; min-height: 100%; } html, body { height: 100%; } .fill { min-height: 100%; } ``` - EDIT * I've added height to the fill class as suggested below. But, the problem is that I add a padding-top to the body to account for the fixed navbar at the top. This affects the 100% height of the "map" div and means that a scrollbar gets added - as seen here: http://jsfiddle.net/S3Gvf/2/ Can anyone tell me how to fix?

Original source

Related problems