CSS Chrome 中的高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3124394/
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
height 100% in Chrome
提问by andrei
I'm having problems with a side divthat won't get the height to 100% in Chrome. It works just fine in FF.
我div在 Chrome 中无法将高度提高到 100% 时遇到问题。它在 FF 中工作得很好。
I'm using:
我正在使用：
html, body {
padding: 0px;
width: 100%;
height: 100%;
}
#div {
min-height: 100%;
}
Why is that ?
这是为什么 ？
采纳答案by Diadistis
This works perfect for me on every browser :
这在每个浏览器上都非常适合我：
<!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">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; background-color: gray; }
</style>
</head>
<body>
<div id="div">test</div>
</body>
</html>
Can you provide more details?
你能提供更多细节吗？
Edit
编辑
Here is the updated version based on the provided information :
以下是根据提供的信息更新的版本：
<!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">
<head>
<title>min-height test</title>
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
.contents { height: 100%; width: 780px; margin-left: auto;
margin-right: auto; text-align: left; }
#right { float: left; width: 217px; min-height: 100%; background:#4b805b; }
</style>
</head>
<body>
<div class="contents">
<div id="right">test</div>
</div>
</body>
</html>
Still everything looks fine for Chrome, Firefox and IE8
对于 Chrome、Firefox 和 IE8 来说，一切看起来都还不错
回答by Sjoerd
From http://doctype.com/give-two-nested-divs-100-minheight:
来自http://doctype.com/give-two-nested-divs-100-minheight：
The child element inherits the height of the parent container only if it is specified explicitly. But min-height is not an explicit specification of height, so the computed height is "auto" and not 100%.
仅当明确指定时，子元素才会继承父容器的高度。但是 min-height 不是高度的明确规范，因此计算的高度是“自动”而不是 100%。
回答by CarterMan
You have to specify your parent with 100% height as well as the child so
你必须用 100% 的高度指定你的父母和孩子，所以
html,body{
height: 100%;
}
#div{
min-height: 100%;
height: auto !important;
height: 100%; /*for IE*/
}
The !important will overwrite all other height rules. Try that you should have no problems.
!important 将覆盖所有其他高度规则。试试你应该没有问题。
回答by Aditya P Bhatt
Check with Below code, working and Printing labels fine for me under Zebra GC420dlabel printer:
检查下面的代码，在Zebra GC420d标签打印机下工作和打印标签对我来说很好：
<!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">
<head>
<meta charset="utf-8">
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; }
</style>
</head>
<body>
<div style="border: 0px solid red;">
<table border="0" width="100%" align="center">
<tr>
<td style="text-align: center;">
<?php
echo $name;
?>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td style="text-align: center;">
<?php
echo 'https://goo.gl/2QvRXf';
?>
</td>
</tr>
</table>
</div>
</body>
</html>
Hope it helps!
希望能帮助到你！
