The . container-fluid class provides a full width container, spanning the entire width of the viewport.
container class is defined in its own CSS. The grid has to exist within a container class DIV. The container DIV is just an indication to Bootstrap that the grid within has that parent. Therefore, you cannot set the height of a container.
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)
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.
you need to add padding-top to "fill" element, plus add box-sizing:border-box - sample here bootply
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With