14 
<img id='imgT' src="...">

<div id="divL"></div>
<div id="divR"></div>

CSS

body{
    max-width:1024px;
}
#imgT{
    width:100%;
    border:thin solid blue;
    display:block;
}
#divL{
    width:20%;
    height:100px;  // I need 100%
    background:#008080;
    float:left;
}
#divR{
    width:80%;
    height:100px;  // I need 100%
    background:blue;
    float:left;
}

フィドルはこちら

では、2 つの div の高さを 100%、つまり画像の下部からページの下部にするにはどうすればよいでしょうか。

4

2 に答える 2

31

html前にとの高さbodyも 100%に設定する必要があります。次に、要素の高さを 100% に設定できます。

body, html {
    height: 100%;
}

#divL, #divR {
    height: 100%;
}

フィドルを更新しました。

于 2013-10-01T17:33:39.637 に答える
9

便利なオプションがいくつかあります。

vh (ビューポートの高さ) vw (ビューポートの幅) vmin (ビューポートの最小の長さ) vmax (ビューポートの最大の長さ) では、実際の例を見てみましょう。それぞれがブラウザー ウィンドウのサイズの 2 つのセクションを持つ Web サイトを作成するとします。

HTML の単純化されたコード例を次に示します。

<div id="welcome">
   your content on screen 1
</div>

<div id="projects">
   your content on screen 2
</div>

vh を使用した CSS は次のとおりです。

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

詳細については、次を参照してください。

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

于 2014-12-12T05:25:36.580 に答える