mwilson mwilson - 5 months ago 15
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.

https://jsfiddle.net/7xtybdrm/1/

CSS:

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 {
background-color:aqua;
height: 100px;
flex: 1;
}

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

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


HTML:

<head runat="server">
<title></title>
</head>
<body>
<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>
</button>
<a class="navbar-brand" href="#">asdfasdf.com</a>
</div>
<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>
</ul>
</div>
</div>
</nav>
<div class="conatiner-fluid body-container col-lg-12">
<div class="row">
<div class="container-fluid ribbon-container">
Ribbon
</div>


<div class="content-container">
Content
</div>


<div class="footer-container">
Footer
</div>
</div>
</div>
</body>

Jon Jon
Answer

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!

https://jsfiddle.net/7xtybdrm/4/

enter image description here

Comments