Html 为 div 扩展全高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4535983/
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
For div to extend full height
提问by bear
Is there a method I can use for a div to extend to full height? I've got a sticky footer in it as well.
有没有一种方法可以让 div 扩展到全高？我也有一个粘性页脚。
Here's the web page: Website removed. The middle bit I'm talking about is the white div, midcontent which has CSS values:
这是网页：网站已删除。我正在谈论的中间部分是白色 div，midcontent，它具有 CSS 值：
.midcontent{
width:85%;
margin:0 auto;
padding:10px 20px;
padding-top:0;
background-color:#FFF;
overflow:hidden;
min-height:100%;
max-width:968px;
height:100%;
}
So yes, obviously height:100%didn't work. Additionally, ALL parent containers have height set.
所以是的，显然height:100%没有用。此外，所有父容器都设置了高度。
Here's the general structure
这是一般结构
<body>
<div id="wrap">
<div id="main">
<div class="headout">
<div class="headimg"></div>
</div>
<div class="midcontainer"></div>
</div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
回答by Tom
Did you remember setting the height of the html and body tags in your CSS? This is generally how I've gotten DIVs to extend to full height:
你还记得在你的 CSS 中设置 html 和 body 标签的高度吗？这通常是我让 DIV 扩展到全高的方式：
<html>
<head>
<style type="text/css">
html,body { height: 100%; margin: 0px; padding: 0px; }
#full { background: #0f0; height: 100% }
</style>
</head>
<body>
<div id="full">
</div>
</body>
</html>
回答by Brian Clapper
This might be of some help: http://www.webmasterworld.com/forum83/200.htm
这可能会有所帮助：http: //www.webmasterworld.com/forum83/200.htm
A relevant quote:
相关报价：
Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.
The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.
html, body { margin:0; padding:0; height:100%; }
大多数实现此目的的尝试都是通过分配属性和值进行的： div{height:100%} - 仅此一项是行不通的。原因是没有父定义的高度， div{height:100%;} 没有任何因素可以考虑 100% 的百分比，并且将默认为 div{height:auto;} 的值 - auto 是“根据需要的值" 这取决于实际内容，因此 div{height:100%} 将 a=only 扩展到内容需要的范围。
通过为父容器（在本例中为 body 元素）分配高度值，可以找到问题的解决方案。将你的身体风格写成包括高度 100% 提供了所需的值。
html, body { margin:0; padding:0; height:100%; }
回答by Frank L?mmer
This is an old question. CSS has evolved. There now is the vh(viewport height) unit, also new layout options like flexboxor CSS gridto achieve classical designs in cleaner ways.
这是一个老问题。CSS 已经发展。现在有vh（视口高度）单位，还有新的布局选项，例如flexbox或CSS grid以更简洁的方式实现经典设计。
回答by Joehat
In case also setting the height of the html and the body to 100% makes everything messier for you as it did for me, the following worked for me:
如果还将 html 和正文的高度设置为 100% 会使您的一切变得更加混乱，就像对我一样，以下对我有用：
height: calc(100vh - 33rem)
The - 33remis the height of the elements coming after the one we want to take full height, i.e., 100vh. By subtracting the height, we will make sure there is no overflow and it will always be responsive (assuming we are working with rem instead of px).
本- 33rem是我们要充分的高度，即100vh一前一后到来的元素的高度。通过减去高度，我们将确保没有溢出并且它始终是响应式的（假设我们使用的是 rem 而不是 px）。
回答by Dimitris Kremezis
if setting height to 100% doesn't work, try min-height=100% for div. You still have to set the html tag.
如果将高度设置为 100% 不起作用，请尝试为 div 设置 min-height=100%。您仍然需要设置 html 标签。
html {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#fullHeight{
width: 450px;
**min-height: 100%;**
background-color: blue;
}
