mwilson mwilson - 2 years ago 112
CSS Question

Make 3 divs fit window height using flexbox

How do I make 3 separate divs stretch to the height of the screen without overflow kicking in?

I am using bootstrap and flexbox, but whenever I set the height of the row to 100%, overflow kicks in.

I would like 'content' (yellow area) to fill the bulk of the page and the header (aqua area) and footer (pink area) taking up only 100px.

I have played around with flex-grow and stretch with no avail.

Thanks in advance for any helpful input.


body {padding-top: 51px;}
html, body {
background-color: rgb(48, 48, 48);
height: 100%;

.body-container {
height: 100%;
display: flex;
flex-direction: column;


.ribbon-container {
height: 100px;
flex: 1;

.content-container {
background-color: yellow;
display: flex;
flex: 2;

.footer-container {
height: 50px;
background-color: pink;
display: flex;
flex: 1;


<head runat="server">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#"></a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li><a href="../Default.aspx">Home</a></li>
<li><a href="../Pages/About.aspx">About</a></li>
<li class="active"><a href="../Pages/Applications.aspx">Applications</a></li>
<div class="conatiner-fluid body-container col-lg-12">
<div class="row">
<div class="container-fluid ribbon-container">

<div class="content-container">

<div class="footer-container">

Jon Jon
Answer Source

You're running into difficulties because of the default .row class in Bootstrap.

Set up an override for this class so that it's a flex element instead of a block element, and you're in good shape!

Now when we add overflow: auto to the content container, the header and footer stay put, while the content area scrolls.

Also, I recommend the shorthand for flex elements:

flex: 0 0 100px means that the element is a fixed height of 100px (or width...depending on your flex-direction), and will not stretch or shrink.

flex: 1 simply means that the element will stretch and shrink in all directions.

To make it more obvious that the header and footer are fixed sizes, I've set them to flex: 0 0 50px, so just change this to 100px when you copy over the code!

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download