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%;
}
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?
This question is related to
css
twitter-bootstrap
height
you need to add padding-top to "fill" element, plus add box-sizing:border-box - sample here bootply
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
It is very simple. You can use
.fill .map
{
min-height: 100vh;
}
You can change height according to your requirement.
Source: Stackoverflow.com