web-dev-qa-db-ja.com

Bootstrap-ヘッダーとフッターの間に液体コンテナを充填します

これは非常に単純な質問かもしれませんが、私はしばらくの間CSSシーンから離れていて、それを理解できないようです。 Bootstrapフレームワークを使用していて、ヘッダーとフッターが固定されています。その間のコンテナーには、ナビゲーションバーとコンテンツ領域が含まれています。そのコンテナーでスペース全体（高さ100％）を埋めたいです）ヘッダーとフッターの間。

プロジェクトのjsFiddleは次のとおりです。 http://jsfiddle.net/NyXkt/2/

これは現在のhtml構造です：

<div id="wrapper">
    <!-- Header -->
    <div class="container-fluid no-padding header">
        <div class="row-fluid fill-height">
            <!-- Header Left -->
            <div class="span2">
                <p class="center-text">Left</p>
            </div>
            <!-- Header Middle -->
            <div class="span8">
                <p class="center-text">Middle</p>
            </div>
            <!-- Header Right -->
            <div class="span2">
                <p class="center-text">Right</p>
            </div>
        </div>
    </div>
    <!-- Content Wrapper -->
    <div class="container-fluid no-padding fill">
        <div class="row-fluid">
            <div class="span2">
                <div class="well sidebar-nav-fixed no-padding">
                    <ul id="nav">
                        <li><a href="#">Item 1</a>

                            <ul>
                                <li><a href="#">Sub-Item 1 a</a>
                                </li>
                                <li><a href="#">Sub-Item 1 b</a>
                                </li>
                                <li><a href="#">Sub-Item 1 c</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 2</a>

                            <ul>
                                <li><a href="#">Sub-Item 2 a</a>
                                </li>
                                <li><a href="#">Sub-Item 2 b</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3</a>

                            <ul>
                                <li><a href="#">Sub-Item 3 a</a>
                                </li>
                                <li><a href="#">Sub-Item 3 b</a>
                                </li>
                                <li><a href="#">Sub-Item 3 c</a>
                                </li>
                                <li><a href="#">Sub-Item 3 d</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Item 4</a>

                            <ul>
                                <li><a href="#">Sub-Item 4 a</a>
                                </li>
                                <li><a href="#">Sub-Item 4 b</a>
                                </li>
                                <li><a href="#">Sub-Item 4 c</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="span10">
                <p class="center-text">Content</p>
            </div>
        </div>
    </div>
</div>
<!-- Footer -->
<div id="footer">
    <div class="container-fluid">
        <p class="center-text">Footer</p>
    </div>
</div>

誰かが私がする必要があるかもしれないことを説明したり、例を教えてくれたら、私はそれをいただければ幸いです。

htmlcsstwitter-bootstrapfluid
12
fortune

ブートストラップ4（2019年更新）

これで、flexboxを使用してこのレイアウトを取得するのが簡単になりました。

<body class="d-flex flex-column">
    <header>
    </header>
    <main class="container-fluid flex-fill">
    </main>
    <footer>
    </footer>
</body>

body {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

デモ

注：flex-fillユーティリティクラスは 次のBootstrap 4.1）に含まれます リリース。したがって、その後のリリースでは、flex-fill用の追加のCSSは必要ありません。

ブートストラップ2（2013年の元の回答）

親コンテナも100％の高さである必要があります（html、body、＃wrapper）。 #wrapper {height：100％}を作成し、コンテナに「fill-height」を追加すると、機能するはずです。ここを参照してください：

http://jsfiddle.net/skelly/NyXkt/4/

#wrapper {
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 auto -33px;
}
15
Zim