Twitter Bootstrap: div in container with 100% 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%;
}
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?
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)
你需要添加padding-top到“fill”元素，再加上box-sizing：border-box - sample here bootply
Update 2018
In Bootstrap 4 , flexbox can be used to get a full height layout that fills the remaining space.
First of all, the container 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://www.codeply.com/go/dTaVyMah1U
Option 2_ Use vh units:
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
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
链接地址: http://www.djcxy.com/p/88262.html