twitter bootstrap container div height

css, twitter-bootstrap

Solution

It's possible to achieve with a bit of jQuery.

HTML:

<div id="main-wrapper">
    <div id="navbar" class="navbar 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>  <!-- you forgot the closing </a> -->  
                <div class="nav-collapse">
                    <ul class="nav">
                        ....
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="firstcontainer" class="container" >
        <div class="row">
            <span class="span12">
            .....
            </span> <!-- allways include a .span* in a .row -->           
        </div>
    </div>

    <div id="secondcontainer" class="container" style="background-color:#cccccc;"> <!-- this is the one I want to stretch to the bottom -->
        <div class="row">
            <div class="span12">
                <ui:insert name="body" />
            </div>
        </div>
    </div>

    <div id="push"></div>
    </div>
    <footer role="contentinfo">
       footer content
    </footer>

jQuery:

function sizing() {
  var wrapperheight=$("#main-wrapper").height();
  var navbarheight=$("#navbar").height();
  var firstcontainerheight=$("#firstcontainer").height();
  var pushheight=$("#push").height();    
  var footerheight=$("#footer").height();
  var secondcontainerheight=wrapperheight-navbarheight-firstcontainerheight-pushheight-footerheight-50;
  $("#secondcontainer").height(secondcontainerheight+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);

jsFiddle:

http://jsfiddle.net/baptme/6Lghx/1/

Extra:

Always add a `.span*` inside a `.row`. there's a sort of negative margin on a `.row` to compensate the left-margin off the first `.span`

You forgot to close the `<a class="btn btn-navbar">`

Problem

I am using twitter bootstrap and I would like a container div to stretch to the bottom of the page, but it doesnt. It is always the size corresponding to the content. How to fix that? ``` <body> <div id="main-wrapper"> <div class="navbar 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> <div class="nav-collapse"> <ul class="nav"> .... </ul> </div> </div> </div> </div> <div class="container"> <div class="row"> ..... </div> </div> <div class="container"> <!-- this is the one I want to stretch to the bottom --> <div class="row"> <ui:insert name="body" /> </div> </div> <div id="push"></div> </div> <footer role="contentinfo"> footer content </footer> </body> ``` The css: ``` footer[role="contentinfo"] { color: #666; background: black; padding: 18px 0; } footer[role="contentinfo"] p { margin: 0; } /* Sticky Footer styles begin */ html,body { height: 100%; } #push { height: 54px; } footer[role="contentinfo"] { height: 18px; /* accounts for padding */ } #main-wrapper{ min-height: 100%; height: auto !important; height: 100%; margin: 0px auto -54px; } ``` Thanks for any help Kelly

Original source