Question

我正在使用twitter bootstrap，我希望将容器div拉伸到页面底部，但它不会。它始终是与内容相对应的大小。如何解决？

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

感谢您的帮助

凯利

Answer 1

有可能通过一些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/

<强>附加

始终在.span*内添加.row。 .row有一种负余量来补偿第一个.span

左边距离

您忘了关闭<a class="btn btn-navbar">

Answer 2

感谢您的讨论，我得出了以下解决方案：

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);
})

twitter bootstrap container div height

2 个答案: