5

I have seen a number of questions about divs that take up 100% of the screen, but none quite match the requirements I have. I guess the closest would be:

How to have multiple columns that consume 100% height using twitter bootstrap?

The problem with this one is it doesn't use twitter bootstrap conventions, and I also have some extra div nesting.

A relevant code snippet is here:

<!-- Standard bootstrap fixed header -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

<!-- here is the interesting section -->
<div id="app-container" class="container-fluid" style="background-color: red;">
  <div id="app" class="row-fluid" style="background-color: blue;">
    <div id="menu" class="span2" style="background-color: green;">
      Menu
    </div>
    <div id="content" class="span10" style="background-color: purple;">
      Content                    
    </div>
  </div>
</div>

And a link to the jsFiddle: http://jsfiddle.net/djMJX/18/

What I need:

  • The container-fluid div (#app-container) should reach to the bottom of the page
  • There should be no extra scrolling caused by the top navbar

  • content should also reach the bottom of the page. If the content is longer than the page, #app-container and #content should stretch so that the content is contained within

I have tried various variations of setting heights and min-heights to 100%. The problem seems to arise from the extra row-fluid. I have come close where all divs reached the bottom of the page, and it looked fine when the content was short enough, but it fell apart when the content exceeded the height of the page.

I appreciate any help I can get. Thanks!

Community
  • 1
  • 1
Alex Kawrykow
  • 95
  • 1
  • 1
  • 3
  • I figured it out. I based it off the answer given in the link I provided above. The trick I used was adding a huge amount of padding to the #content div with the a negative bottom margin of the same amount. Adding in an over-flow: hidden to the app container finished it off. See the jsFiddle here: http://jsfiddle.net/djMJX/21/ – Alex Kawrykow Nov 30 '12 at 05:16

1 Answers1

3

We have recently started using Bootstrap, however as a web app we encountered difficulty in using the grid system with 100% height. Our solution was to supplement the Bootstrap grid with some helper css classes that utilise the Flexible Box Layout module.

This is the abstract from the specification:

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Here are some further details...

CSS Flexible Box Layout Module Specification

Introduction and Tutorial

However the specification is only at the Candidate Recommendation stage, so it's still quite new. You will also need to consider browser support...

Can I Use Flexbox

There is a polyfill available if you do need to support older versions of IE:

FlexieJS

Brett Postin
  • 11,215
  • 10
  • 60
  • 95