5

ツイッターのブートストラップを使用していて、コンテナー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;
}

助けてくれてありがとう

ケリー

4

2 に答える 2

3

少しの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最初の左マージンを補うために、aには一種の負のマージンがあります.span

あなたは閉じるのを忘れました<a class="btn btn-navbar">

于 2012-07-04T20:16:21.450 に答える
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);
})
于 2013-01-13T16:43:13.847 に答える