div高度100％

Question

<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;
}

小提琴就在這里

那么，我怎樣才能使兩個div高度達到100％，即從圖像底部到頁面底部。

Answer 1

您之前需要將html和body的高度設置為100％。 然后，您可以將元素高度設置為100％。

body, html {
    height: 100%;
}

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

更新了小提琴。

Answer 2

您可能會發現一些有用的選項：

vh（視口高度）vw（視口寬度）vmin（視口最小長度）vmax（視口最大長度）現在，讓我們看一個真實的例子。 想象一下，您想要創建一個包含兩個部分的網站，每個部分都具有瀏覽器窗口的大小。

這里只是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/