6

私はこのようなものを持っています:

+-------------------------------------------+
|             -- navigation --              |
+------+------------------------------------+
|      |                                    |
| left |                                    |
| side |                                    |
| with |                                    |
| affix|           -- content (white) --    |
| menu |                                    |
|-black|                                    |
|      |                                    |
|      |                                    |
|      +------------------------------------+
|      |           -- footer (white) --     |
+------+------------------------------------+

TB 3.0 での私のレイアウト、およびいくつかのコードとして:

<body>
    <header>
        <div class="row">
            <div class="col-md-12>-- navigation (height = 50px) here --</div>
        </div>
    </header>

    <div class="row">
        <div class="col-md-4">-- left side with black background here --</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">-- content with white background here --</div>
            </div>

            <div class="row">
                <div class="col-md-12">-- footer (height = 50px) with white background here --</div>
            </div>
        </div>
    </div>
</body>

左側 (黒い背景) とコンテンツ (白い背景) をブラウザー ウィンドウの高さ = 100% にし、コンテンツの下のフッター (白い背景) を (スクロールしても) 見えるようにします。

今のところ、辺の最後の要素の高さを取得します。コンテンツが短い場合、たとえばブラウザの垂直方向の中央で終了します。

ここにあります：http://codepen.io/anon/pen/FxImy

4

3 に答える 3

11

純粋な CSS ソリューション (calc を使用)

CSS3 を使用でき、この50px高さが静的である場合は、使用calcしてレイアウトを実現できます。

ここにデモがあります

HTML

<header>
        Header
</header>
<div id="Container">
    <div id="Left">I'm in the left menu</div>
    <div id="Right">
        <div id="Content">Content</div>
        <footer>Footer</footer>
    </div>
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

header, footer
{
    height: 50px;

    background-color: yellow;
    text-align: center;
}
#Container, #Content
{
    height: calc(100% - 50px);
    overflow: auto;
}
#Left, #Right
{
    height: 100%;
}
#Left
{
    float: left;
    background-color: black;
    color: white;
}
#Right
{
    overflow: auto;
}

高さが静的でない場合は、別の解決策があります。ここでは、レイアウトが正確ではないことを示していますが、同じ方法で実行できます。

于 2013-10-29T09:34:04.133 に答える
1

この例が役立つかどうかを確認してください: http://bootply.com/87811

基本的に、列をコンテナーにラップし、高さを 100% に設定し、ナビゲーション バー、サイドバー、フッターを作成します。position:fixed

于 2013-10-25T15:36:14.243 に答える