Html Css 高度百分比不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8262852/
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
Css height in percent not working
提问by strangeQuirks
I have the following simple code:
我有以下简单的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Live Feed</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>
</html>But the div doesn't get displayed with height being 100%. Why?
但是 div 不会以高度为 100% 的方式显示。为什么？
回答by Jan Dragsbaek
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddleshows it working.
您需要在所有父元素上设置 100% 高度，在这种情况下是您的 body 和 html。这个小提琴显示它工作。
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }<html><body><div></div></body></html>回答by mb21
回答by GG.
height: 100%works if you give a fixed size to the parent element.
height: 100%如果您为父元素提供固定大小，则有效。
回答by Muthu
You can achieve that by using positioning.
您可以通过使用定位来实现这一点。
Try
尝试
position: absolute;
to get the 100% height.
获得 100% 的高度。
回答by rahul
You need to set 100% height on the parent element.
您需要在父元素上设置 100% 高度。
回答by Pramod Bhoi
Add height:100% to body
添加高度：100% 到身体
body{height:100%}
回答by SiggeLund
This is what you need in the CSS:
这是你在 CSS 中需要的：
html, body {
height: 100%;
width: 100%;
margin: 0;
}
回答by Proxytype
the root parent have to be in pixels if you want to work freely with percents,
如果您想自由使用百分比，则根父级必须以像素为单位，
<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
<div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
<div style="height: 100%;width: 50%;float: left;"></div>
<div style="height: 100%;width: 28%;float:left">
<img src="img/justimage.png" style="max-width:100%;max-height:100%;">
</div>
<div style="height: 100%;width: 22%;float: left;"></div>
</div>
</div>
</body>
