Twitter Bootstrap div in container with 100 height

Question

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    lt body gt     lt div class  navbar navbar-fixed-top  gt      lt  -- Rest of nav bar chopped from here -- gt     lt  div gt     lt div class  container fill  gt       lt div id  map  gt  lt  div gt   lt  -- This one wants to be 100  height -- gt     lt  div gt   lt  body gt    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

User · Accepted Answer

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

User · Answer

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

User · Answer

It is very simple  You can use    fill  map      min-height  100vh      You can change height according to your requirement

User · Answer

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

[css] Twitter Bootstrap: div in container with 100% height

Examples related to css

Examples related to twitter-bootstrap

Examples related to height