Html div 高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19122392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div height 100 percent
提问by qadenza
<img id='imgT' src="...">
<div id="divL"></div>
<div id="divR"></div>
css
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;
}
fiddle is here
小提琴在这里
So, how can I make the two divs height 100 percent, i.e. from the bottom of image to the bottom of page.
那么，如何使两个 div 的高度为 100%，即从图像底部到页面底部。
回答by federico-t
You need to set the height of htmland bodyto 100% too before. Thenyou can set your element height 100%.
您之前也需要将html和的高度设置body为 100%。然后您可以将元素高度设置为 100%。
body, html {
height: 100%;
}
#divL, #divR {
height: 100%;
}
回答by anayarojo
There are a few options you may find useful:
有几个选项可能对您有用：
vh (viewport height) vw (viewport width) vmin (viewport minimum length) vmax (viewport maximum length) Now, let's have a look at a real example. Imagine you want to create a website with two sections, each one of them with the size of the browser window.
vh（视口高度） vw（视口宽度） vmin（视口最小长度） vmax（视口最大长度） 现在，让我们看一个真实的例子。想象一下，您想要创建一个包含两个部分的网站，每个部分都具有浏览器窗口的大小。
Here's just a simplified code example of the HTML:
这只是 HTML 的一个简化代码示例：
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here's the CSS using vh:
这是使用 vh 的 CSS：
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
You can see more in:
您可以在以下位置查看更多信息：
http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
