Geek asks and answers

Bootstrap size twitter div height

I use twitter bootstrap and I would like the div container to stretch to the bottom of the page, but that is not the case. This is always the size corresponding to the content. How to fix it?

<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>

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

+5
source share
2 answers

Can be achieved using 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/

Additionally:

Always add .span*inside a .row. there is a kind of negative margin on .rowto offset the left edge from the first.span

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

+3
source

Thanks for the discussion, I got the following solution:

jQuery.fn.fill_height = function() {
    var bodyheight = $('body').height() - 200;
    $(this).css('min-height', bodyheight + "px");
}

$(function() {
    function fill_heigh_callback() {
        $('.container.full-height').fill_height()
        $('.container-fluid.full-height').fill_height()
    }

    fill_heigh_callback()
    $(window).resize(fill_heigh_callback);
})
+2
source

More articles:


All Articles