Make 3 divs fit window height using flexbox

Question

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 · Accepted Answer · 2016-06-22T02:58:04.937

5

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/

edited Jun 22 '16 at 02:58

answered Jun 22 '16 at 02:52

Jon

3,154
13
53
96

Thanks, Jon! This works great. Thanks for the additional info (new to flexbox) – mwilson Jun 22 '16 at 02:59
1

You bet! I'm still learning new things with Flexbox, too. You'll get the hang of it! Bookmark one of my other answers that features another common app layout using Flexbox: http://stackoverflow.com/questions/33514047/flexbox-holy-grail-layout-fixed-header-fixed-left-nav-fluid-content-area-fix. There's a simplified version with colored blocks that might help you understand how things work! Lastly, this link is the mecca for all things Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Jon Jun 22 '16 at 03:02

Make 3 divs fit window height using flexbox

1 Answers1