157

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?

2
  • 1
    So you just want to stretch that div in all directions? Jul 26, 2012 at 21:04
  • 1
    Yes, i want it to fill in the space left after the nav div Jul 27, 2012 at 22:17

4 Answers 4

139

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)

10
  • Thanks, will try that later and report back. Can't believe I missed that simple fix :) Jul 27, 2012 at 12:38
  • 2
    Thanks, this kind of works, but the twitter bootstrap nav, which is fixed position, makes the map go off the bottom - you need to scroll to the bottom. I don't know how to make the div span to the whole available screen space MINUS the nav bar. Jul 27, 2012 at 22:16
  • 2
    jsfiddle.net/S3Gvf/4 use box-sizing:border-box; on the element with the padding (body tag) for an easy workaround
    – Horen
    Jul 28, 2012 at 17:25
  • 1
    I'm not too sure how that css3 voodoo works, but work it does :) Thanks very much! Jul 28, 2012 at 20:23
  • 1
    The #map is actually obscured behind the navbar in this example.
    – Ethereal
    May 7, 2013 at 19:57
70

Update 2019

In Bootstrap 4, flexbox can be used to get a full height layout that fills the remaining space.

First of all, the container (parent) needs to be full height:

Option 1_ Add a class for min-height: 100%;. Remember that min-height will only work if the parent has a defined height:

html, body {
  height: 100%;
}

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

https://codeply.com/go/dTaVyMah1U

Option 2_ Use vh units:

.vh-100 {
    min-height: 100vh;
}

https://codeply.com/go/kMahVdZyGj

Also of Bootstrap 4.1, the vh-100 and min-vh-100 classes are included in Bootstrap so there is no need to for the extra CSS

Then, use flexbox direction column d-flex flex-column on the container, and flex-grow-1 on any child divs (ie: row) that you want to fill the remaining height.

Also see:
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap - Fill fluid container between header and footer
How to make the row stretch remaining height

4
  • 2
    Why does it seem that both of these approaches are counter-intuitive to simply creating a second container that takes up the rest of the bottom height of the window? There should be flexibility for the developer to do whatever they want with bootstrap in the above given space.
    – klewis
    Jun 25, 2018 at 14:43
  • 1
    Do you really think this deserves a downvote? "simply creating a second container that takes up the rest of the bottom height of the window" .. do you have an example of how that would work? the whole point is height:100% doesn't simply consume the rest of the bottom height, but instead consumes 100% of the viewport height creating a vertical scrollbar. That's why the map requires scolling to the bottom in the accepted answer. Jun 25, 2018 at 14:51
  • 2
    you are a well respected developer on these forms for BootStrap. I didn't downvote you, someone else did. I'm just surprised by your answer because most of your answers are highly voted. I wish I had an example of how that worked. I haven't found anything yet, but it would be nice if flexbox did have an easy way of filling the rest of an element towards the bottom of the page. Thanks for trying to provide an answer, I would just assume we were there in easily implementing this. I guess not :)
    – klewis
    Jun 25, 2018 at 14:59
  • 2
    Ok, as stated in the answer "use flexbox direction column d-flex flex-column on the container, and flex-grow-1 on any child divs (ie: row) that you want to fill the remaining height"... the parent is 100% height as explained Jun 25, 2018 at 15:35
10

It is very simple. You can use

.fill .map 
{
  min-height: 100vh;
}

You can change height according to your requirement.

1

you need to add padding-top to "fill" element, plus add box-sizing:border-box - sample here bootply

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.