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

小提琴在这里

那么，我怎样才能使两个 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（视口最大长度） 现在，让我们看一个实际示例。想象一下，您想创建一个包含两个部分的网站，每个部分都有浏览器窗口的大小。

这只是 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 回答