shkipper shkipper - 4 months ago 15
CSS Question

Bootstrap 3, full height container without scroll

I want to make a bootstrap layout with header, sticky footer, and 2 fluid containers. one of which is of fixed height, and the other must take all remaining height.

currently i tried to accomplish this by setting height to 100% for second container, but unfortunately it adds scroll to window. How can I make container2 to fill available height, so it does not add the scroll to window.

<div id="app" class="height100">
<div class="height100">
<div class="navbar navbar-default">
NAVBAR
</div>
<div class="container-fluid container1">
CONTAINER 1
</div>
<div class="container-fluid container2">
CONTAINER 2
</div>
<div class="footer">
FOOTER
</div>





html,
body,
.height100 {
height: 100%;
}

.navbar {
margin-bottom: 0px;
background-color: red;
}

.container1 {
background-color: yellow;
height: 105px;
}

.container2 {
background-color: green;
height: 100%;
}

.footer {
bottom: 0;
background-color: white;
border-top: #ddd 1px solid;
padding-top: 5px;
position: fixed;
left: 0;
right: 0;
-webkit-transform: translateZ(0);
}


FIDDLE

Thank You.

Answer

set overflow to hidden .
CSS

.height100
  {
  height: 100%;
 overflow:hidden;
 }

https://jsfiddle.net/no83psx3/4/

Comments