Consistent full height vertical sizing with Bootstrap 3 layout?

Question

I've got a fairly simple Bootstrap 3 based layout where I want the main element (a central div) to expand or contract vertically to fill the available space as the browser window is resized, but allowing for a couple of elements below that, so that the height of all the elements neither overflows the window height (thus causing a scroll bar to appear) or underflows (thus wasting visible vertical space in the window).

Closest I can get to achieving this is as follows. Problem is that the ".90-height" class (height: 90%) either leads to slightly too little or slightly too much total height for all the elements, depending on vertical window size.

CSS:

.full-height { height: 100%; }
.90-height { height: 90%; }
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; }
.controlsdiv { display: table; width: 100%; }

HTML:

<html class="full-height">
   <body class="full-height">

      <div class="navbar navbar-fixed-top" style="min-height:20px !important;">

      <div class="container-fluid full-height">
         <div class="row 90-height">
            <div class="90-height"> <-- Main column -->
               <div class="doborder full-height">

                  <-- Content here -->

               </div>
               <div class="controlsdiv">
                  <-- Couple of controls in here -->
               </div>
            </div> <-- End main column -->
         </div> <-- End row -->

         <footer style="margin-top: 30px;">
            <span>Some text</span>
         </footer>

      </div> <-- End container -->

   </body>
</html>

Only thing is I can't simplify this structure at all - i.e. remove any of the elements as I need them all for various things.

Possible duplicate of [Fill remaining vertical space - only CSS](http://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css) — , May 13 '17 at 18:37

Carol Skelly · Accepted Answer · 2017-05-13T15:03:45.197

There are a few different ways you could approach it. Also reminder that CSS class names shouldn't start with numbers. You could use CSS calc() to subtract the height of the footer from the body. You only need to use height-90 once on the main container.

CSS calc() Demo http://www.codeply.com/go/mbXpavYiV8

.height-90 { height:calc(100% - 50px); }

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
    </ul>
</div>
<div class="container-fluid height-90 bg-info">
    <div class="row">
        <div class="">
        </div>
        <div class="controlsdiv">
        </div>
    </div>
</div>
<footer style="margin-top: 30px;">
    <span>Some text</span>
</footer>

Another solution is to use flexbox..

.full-height { display: flex; flex-direction: column; height: 100%; }
.fill-height { flex-grow: 1; width: 100%; }

Flexbox Demo http://www.codeply.com/go/tFUf5XFe29

that really helped thanks. I had to take into account the extra div layer in my layout between the row div and the two inner divs, but worked it out in the end. My only question is when using precise pixel measurements in the CSS calc (e.g. 50px in your example) - won't these be slightly different across browsers? I need my code to work on all desktop browsers and as many mobile ones as possible... — Alex Kerr, May 15 '17 at 13:47
Flexbox looks promising but I can't use it as it's not fully supported across most browsers in use today... — Alex Kerr, May 15 '17 at 13:47

Consistent full height vertical sizing with Bootstrap 3 layout?

1 Answers1