Html div 高度百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14545507/
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 in Percentage
提问by ZedBee
Possible Duplicate:
Percentage Height HTML 5/CSS
可能的重复：
百分比高度 HTML 5/CSS
This needs to be a simple one but I why the height specified in percentage for a div is not apply to it.
这需要是一个简单的，但我为什么以百分比指定的 div 高度不适用于它。
For example:
例如：
<div class="container">
adsf
</div>
CSS:
CSS：
.container
{
width:80%;
height:50%;
background-color:#eee;
}
When I change height from % to px it works perfectly. % is as valid as px but why only px works and % not. hereis the jsfiddle
当我将高度从 % 更改为 px 时，它完美地工作。% 与 px 一样有效，但为什么只有 px 有效而 % 无效。这是jsfiddle
EditThough I missed the semicolon after 50% in original question which totally spoiled it. In fact what I intended to ask was why does the 50% does not make it consume the 50% of its container. It only takes its height from its content rather than 50% of its container.
编辑虽然我在原始问题的 50% 之后错过了分号，这完全破坏了它。事实上，我想问的是为什么 50% 不让它消耗其容器的 50%。它仅从其内容而不是其容器的 50% 获取其高度。
回答by u283863
It doesn't take the 50% of the whole page is because the "whole page" is only how tall your contents are. Change the enclosing htmland bodyto 100%height and it will work.
它不占用整个页面的 50% 是因为“整个页面”只是您的内容有多高。将封闭html和更改body为100%高度，它将起作用。
html, body{
height: 100%;
}
div{
height: 50%;
}
http://jsfiddle.net/DerekL/5YukJ/1/
http://jsfiddle.net/DerekL/5YukJ/1/
^ Your document is only 20px high. 50% of 20px is 10px, and it is not what you expected.
^ 您的文档只有 20 像素高。20px 的 50% 是 10px，这不是您所期望的。
^ Now if you change the height of the document to the height of the whole page (150px), 50% of 150px is 75px, then it will work.
^ 现在如果将文档的高度更改为整个页面的高度（150px），150px 的 50% 为 75px，那么它将起作用。
回答by Mr Lister
You need to give the bodyand the htmla height too. Otherwise, the body will only be as high as its contents (the single div), and 50% of that will be half the height of this div.
你也需要给body和html一个高度。否则，主体将仅与其内容（单个 div）一样高，其中 50% 将是该 div 高度的一半。
Updated fiddle: http://jsfiddle.net/j8bsS/5/
更新小提琴：http: //jsfiddle.net/j8bsS/5/
回答by Boguz Didgeridoo
There is the semicolon missing (;) after the "50%"
“50%”后面缺少分号 (;)
but you should also notice that the percentage of your div is connected to the div that contains it.
但你也应该注意到你的 div 的百分比与包含它的 div 相关联。
for instance:
例如：
<div id="wrapper">
<div class="container">
adsf
</div>
</div>
#wrapper {
height:100px;
}
.container
{
width:80%;
height:50%;
background-color:#eee;
}
here the height of your .container will be 50px. it will be 50% of the 100px from the wrapper div.
这里 .container 的高度为 50px。它将是包装器 div 中 100px 的 50%。
if you have:
如果你有：
adsf
广告
#wrapper {
height:400px;
}
.container
{
width:80%;
height:50%;
background-color:#eee;
}
then you .container will be 200px. 50% of the wrapper.
那么你的 .container 将是 200px。50% 的包装。
So you may want to look at the divs "wrapping" your ".container"...
所以你可能想看看“包装”你的“.container”的div……
