Twitter Bootstrap: div in container with 100% height

css twitter-bootstrap height
Matt Roberts picture Matt Roberts · Jul 26, 2012 · Viewed 463.1k times · Source

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?

Answer

Horen picture Horen · Jul 26, 2012

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)

Related questions

Set div height equal to screen size

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen. I would like the div to take the height of the size of the browser window and let the rest of the …

Read More
Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row

I am new to Bootstrap 3 and I would like to have 3 panels on my landing page of equal height, even though the middle panel has less content. When resized they become the same height, but are not upon initial visit …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More