Twitter Bootstrap: div in container with 100% height

Asked 26/7, 2012 at 20:54 Answered 12/5, 2019 at 10:7

158

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?

Cigarette answered 26/7, 2012 at 20:54 Comment(2)

So you just want to stretch that div in all directions? – Ministration 26/7, 2012 at 21:4

Yes, i want it to fill in the space left after the nav div – Cigarette 27/7, 2012 at 22:17

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)

Hanghangar answered 26/7, 2012 at 21:7 Comment(10)

Thanks, will try that later and report back. Can't believe I missed that simple fix :) – Cigarette 27/7, 2012 at 12:38

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. – Cigarette 27/7, 2012 at 22:16

can you add your navbar to the jsfidlle so I can see the problem? – Hanghangar 28/7, 2012 at 0:35

Hi - updated the jsfiddle jsfiddle.net/S3Gvf/1 but it looks like it works! I'll check my html again.. – Cigarette 28/7, 2012 at 7:34

Right, original question updated with more information - thanks – Cigarette 28/7, 2012 at 14:59

jsfiddle.net/S3Gvf/4 use box-sizing:border-box; on the element with the padding (body tag) for an easy workaround – Hanghangar 28/7, 2012 at 17:25

I'm not too sure how that css3 voodoo works, but work it does :) Thanks very much! – Cigarette 28/7, 2012 at 20:23

The #map is actually obscured behind the navbar in this example. – Insight 7/5, 2013 at 19:57

If I add a select in this container only, the size is still not 100%, do you know how to solve that? – Subway 14/6, 2013 at 23:26

Correct & Clean answer for Bootstrap 4 by Zim here: #15641642 – Goddaughter 10/1, 2019 at 10:4

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

Spotless answered 27/5, 2018 at 14:57 Comment(4)

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. – Haemorrhage 25/6, 2018 at 14:43

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. – Spotless 25/6, 2018 at 14:51

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 :) – Haemorrhage 25/6, 2018 at 14:59

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 – Spotless 25/6, 2018 at 15:35

It is very simple. You can use

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

You can change height according to your requirement.

Bohemia answered 12/5, 2019 at 10:7 Comment(0)

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

Conlee answered 17/8, 2015 at 13:34 Comment(0)

Recommended topics

Hot tags