0

私は現在、TwitterのBootstrapを使用しており、少し具体的なものを取得しようとしていますが、機能させることができません...

ナビゲーション バー、サイドバー、コンテンツ、フッターを備えた流動的なレイアウトが必要です。また、コンテンツ内に完全な高さの div が必要です。

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="#">Navbar</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->

        <div class="span9">
            <div class="hero-unit">
                <h1>Hero Unit</h1>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <div id="fullHeight" style="background-color: red">
                        <p>Full height here</p>
                    </div>
                </div><!--/span-->
            </div><!--/row-->
        </div><!--/span-->
    </div><!--/row-->

    <hr>

    <footer>
        <p>&copy; Company 2013</p>
    </footer>

</div><!--/.fluid-container-->

CSS

body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .sidebar-nav {
        padding: 9px 0;
    }

    @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
            float: none;
            padding-left: 5px;
            padding-right: 5px;
        }
    }

ここに私が持っている/欲しいものを示すjsfiddleがあります： http://jsfiddle.net/2nuvP/

誰かがこれを機能させるのを手伝ってくれますか?

ヒント : これが CSS のみで可能かどうかはわかりませんが、JS/jQuery ソリューションを受け入れます;) また、ソリューションに HTML の変更が必要な場合、これは大したことではありません...

4

1 に答える 1

1

主にjQueryを使用して問題を解決します。

http://jsfiddle.net/uyEuN/4/

JavaScript 

function resolveFullHeight() {
    $("#fullHeight").css("height", "auto");

    var h_window = $(window).height(),
        h_document = $(document).height(),
        fullHeight_top = $("#fullHeight").position().top,
        est_footerHeight = 112;

    var h_fullHeight = (-1 * (est_footerHeight + (fullHeight_top - h_document)));

    $("#fullHeight").height(h_fullHeight);
}

resolveFullHeight();

$(window).resize(function () {
    resolveFullHeight();
});

ナビゲーションバーの下にこのdivを追加することを除いて、ほとんどの部分でHTMLをそのままにしておきました。

<div class="spacer-fluid-60"></div>

CSS.spacer-fluid-60には、 divの高さを設定するための新しいルールが含まれており、要素のルールも削除しましたpadding-top。body詳細については、jsfiddleを調べてください。

HTMLには、重複するフィラー段落をいくつか追加し、それらの大部分をコメントアウトしたままにしました。必要に応じてコメントを外し、#fullHeight要素のコンテンツの高さのバリエーションを試して、意図したとおりに動作するかどうかを確認します。私がこれまでに行った最小限のテストは、これが機能することを示唆しています。

注：スクロール中に関数が呼び出される回数を減らすために、スロットルを追加します。

于 2013-02-28T06:30:35.287 に答える