30

これは基本的に私が達成したいことです:

例

ページ全体の高さを 100% にしたいのですが、サイドバーと本文を 100% にすると、ナビゲーション バーから 40px がページに追加されるため、本来あるべきでないスクロール バーが表示されます。

テーブルを使用して修正しましたが、もっと簡単な方法があるはずです

<body>
    <div class="container-fluid">
        <div class="navbar"></div>
        <div class="sidebar"></div>
        <div class="body"></div>
    </div>
</body>

そして私がこれまでに持っているCSS：

body, html, .container-fluid, .sidebar, .body {
    height: 100%;
    min-height: 100%;
}
.navbar {
    height: 40px;
    position: relative;
}
4

3 に答える 3

25

100% からナビゲーションバーの高さを引く必要があります。いくつかのソリューションがあり、その多くには JavaScript が含まれていますが、それは必要ありません。

1: ボックスサイズ

ナビゲーションバーに絶対位置を与えます。次に、他の要素のコンテンツがその下に消えるという問題があります。次に、次のトリックを行います。ナビゲーション バーのサイズのトップ パディングを追加します。そして最後のトリック: と に追加しbox-sizing: border-box;ます。ブラウザのサポートを向上させるには、次のように -moz- および -webkit- プレフィックスも必要です。.sidebar.body-moz-box-sizing:

例:ボックスのサイズ変更をいじる

2:実際に引く。

.body, .sidebar{ height: calc(100% - 40px); ブラウザのサポートは、ボックスのサイズ設定よりも 私が知っていることから非常に最小限であるため、最初のソリューションをお勧めします。css-tricks で説明されている Calc

3: フレックスボックス(2015年追加)

高さがわかっている場合はおそらく calc を使用する必要がありますが、テーブルを使用するための優れた代替手段はフレックスボックスです。これは、レスポンシブ Web サイトの複雑なデザインに対する私の救世主です。最高の機能の 1 つをflex-shrink: 0ヘッダーで使用することにより、他の要素を強制的に調整して、コンテナーの残りの部分を埋めることができます。

古い回答は、おそらくフレックスボックスに関する広範なガイドを書き留めるのに最適な場所ではないため、ここでもcss-tricksへの優れたリンクです

于 2013-07-01T10:34:03.700 に答える
1

おそらく、ナビゲーションバーからデフォルトのマージンを追加しているためです。これを試して：

.navbar {
    height: 40px;
    position: relative;
    margin: 0;
    padding: 0;
}

また、最小高を最大高に変更してみてください。

max-height: 100% !important;
于 2013-07-01T10:21:20.963 に答える
-1

サイドバーとボディクラスの周りにコンテナを追加して、コードを少し変更します。

ここに結果があります

CSS:

body, html, .container-fluid, .sidebar, .body {
    height: 100%;
    min-height: 100%;
}

#container{
    width:100%;
    height:100%;
}


.sidebar{
    background-color: green;
    width:10%;
    float:left;
    height:100%;

}

.body{
    background-color: orange;
    float:left;
    width:90%;
    height:100%;

}

.navbar {
    height: 40px;
    position: relative;
    background-color: yellow;
    width:100%;
}

HTML

<div class="container-fluid">
    <div class="navbar">
        navbar
    </div>
    <div id="container">
        <div class="sidebar">
            sidebar
        </div>
        <div class="body">
            body
        </div>
      </div>
</div>

</body>
于 2013-07-01T10:34:12.517 に答える