0

Sticky Footer で Twitter Bootstrap (RTL) を使用しており、高さ 100% の 1 行に 2 つの列があります。しかし、ページを開くと不要なスクロールバーが表示され、その理由がわかりません。

JSFiddleで確認できます。

これは私のHTMLコードです:

<div class="container-fluid mainContainer">
    <div class="row-fluid full-height">
        <div class="span3 sidebar itemContainer full-height">
            <h2>ابزارهای در دست‌رس&lt;/h2>
            @ToolsList.GetToolsList(this, Model)
        </div>
        <div class="span9 main itemContainer full-height">
            <h2>بدنه</h2>
        </div>
    </div>
    <div class="push"></div>
</div>
<footer class="footer itemContainer">
    <div class="container">
        <div class="row">
            <div class="span12">
                توسط احمدعلی شفیعی
            </div>
        </div>
    </div>
</footer>

これは私のCSSスタイルシートです（ブートストラップのデフォルトコードの横）

* {
    font-family: Tahoma;
    font-weight: 100;
    margin: 0;
}

html, body {
    height: 100%;
}

.sidebar {
    border: 1px solid #C0C0C0;
    padding: 5px;
    margin-top: 10px;
}

.main {
    border: 1px solid #C8C8C8;
    padding: 5px;
    margin-top: 10px;
    padding-top: 70px;
    padding-right: 25px;
}

.full-height {
    height: 100%;
    min-height: 100%;
}

.itemContainer {
    background-color: #F5F5F5;
}

.mainContainer {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -40px;
}

.ToolItem {
    margin-right: 20px;
}

.footer, .push {
    clear: both;
    height: 30px;
}

.footer {
    margin: 5px;
    margin-top: 60px;
    padding-top: 5px;
}
4

1 に答える 1

2

あなたの説明から、スティッキー フッターと高さ 100% の画面が必要だと思います...

Twitter Bootstrap のドキュメントと例を確認してください:-

http://twitter.github.io/bootstrap/getting-started.html#examples

スティッキーフッターの例です:-

http://twitter.github.io/bootstrap/examples/sticky-footer.html

このためには、Twitter Bootstrap のドキュメントをダウンロードする必要があります:-

http://twitter.github.io/bootstrap/index.html

これがうまくいくことを願っています...ありがとう...

于 2013-06-13T05:43:20.593 に答える