Twitter Bootstrap: div in container with 100% height

css twitter-bootstrap height

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?

So you just want to stretch that div in all directions?

Yes, i want it to fill in the space left after the nav div

R3tep

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)

Thanks, will try that later and report back. Can't believe I missed that simple fix :)

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.

jsfiddle.net/S3Gvf/4 use box-sizing:border-box; on the element with the padding (body tag) for an easy workaround

I'm not too sure how that css3 voodoo works, but work it does :) Thanks very much!

The #map is actually obscured behind the navbar in this example.

Zim

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

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.

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.

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 :)

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

Sumit Kumar Gupta

It is very simple. You can use

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

You can change height according to your requirement.

mamezito

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

Twitter Bootstrap: div in container with 100% height

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US