CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Alex Kerr
Alex Kerr

Reputation: 1090

Consistent full height vertical sizing with Bootstrap 3 layout?

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.

Upvotes: 1

Views: 1853

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

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

Upvotes: 2

Related Questions