Html 为什么 height: 100% 不能将 div 扩展到屏幕高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7049875/
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
Why doesn't height: 100% work to expand divs to the screen height?
提问by Earl Larson
I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.
我希望轮播 DIV (s7) 扩展到整个屏幕的高度。我不知道为什么它没有成功。要查看该页面，您可以到这里。
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">回答by Madara's Ghost
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the rootelement <html>, which can be a percentage height. .
为了使百分比值适用于身高，必须确定父母的身高。唯一的例外是根元素<html>，它可以是百分比高度。.
So, you've given all of your elements height, except for the <html>, so what you should do is add this:
所以，你已经给了所有元素的高度，除了<html>，所以你应该做的是添加这个：
html {
height: 100%;
}
And your code should work fine.
您的代码应该可以正常工作。
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}<div id=fullheight>
Lorem Ipsum
</div>回答by Josh Crozier
Since nobody has mentioned this..
由于没有人提到这个..
Modern Approach:
现代方法：
As an alternative to setting both the html/bodyelement's heights to 100%, you could also use viewport-percentage lengths:
作为将html/body元素的高度设置为 的替代方法100%，您还可以使用视口百分比长度：
5.1.2. Viewport-percentage lengths: the ‘vw', ‘vh', ‘vmin', ‘vmax' units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
5.1.2. 视口百分比长度：“vw”、“vh”、“vmin”、“vmax”单位
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
In this instance, you could use the value 100vh(which is the height of the viewport) - (example)
在这种情况下，您可以使用值100vh（即视口的高度）- （示例）
body {
height: 100vh;
}
Setting a min-heightalso works. (example)
设置 amin-height也有效。（例子）
body {
min-height: 100vh;
}
These units are supported in most modern browsers - support can be found here.
大多数现代浏览器都支持这些单元 -可以在此处找到支持。
回答by shanethehat
You will also need to set 100% height on the htmlelement:
您还需要在html元素上设置 100% 高度：
html { height:100%; }
回答by Steve Tauber
Alternatively, if you use position: absolutethen height: 100%will work just fine.
或者，如果您使用position: absolutethenheight: 100%将工作得很好。
回答by mrbengi
You should try with the parent elements;
您应该尝试使用父元素；
html, body, form, main {
height: 100%;
}
Then this will be enough :
那么这就足够了：
#s7 {
height: 100%;
}
回答by YellowMart
if you want, for example, a left column (height 100%) and the content (height auto) you can use absolute :
例如，如果您想要左列（高度 100%）和内容（高度自动），您可以使用 absolute ：
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
in html :
在 html 中：
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
回答by oBo
This may not be ideal but you can allways do it with javascript. Or in my case jQuery
这可能并不理想，但您始终可以使用 javascript 来完成。或者在我的情况下 jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
回答by Steven
In the page source I see the following:
在页面源中，我看到以下内容：
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
If you put the height value in the tag, it will use this instead of the height defined in the css file.
如果将高度值放在标签中，它将使用它而不是 css 文件中定义的高度。
回答by Keith Brown
If you absolutely position the elements inside the div, you can set the padding top and bottom to 50%.
如果您绝对将元素定位在 div 内，则可以将填充顶部和底部设置为 50%。
So something like this:
所以像这样：
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
回答by TheMisir
Here's another solution for people who don't want to use html, body, .blah { height: 100% }.
对于不想使用html, body, .blah { height: 100% }.
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.full-height {
height: 100%;
}
.test {
width: 10px;
background: red;
}<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>