最简单的页面来演示我的问题:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
}
body
{
margin: 0;
padding: 0;
}
#container
{
background: red;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
div-container正确地用红色填充浏览器窗口.现在将div包装在一个表单中:
<body>
<form>
<div id="container"></div>
</form>
</body>
和div-container崩溃.为什么？什么是关于'打破''最近的祖先与高度'的表格标签？
zzz*_*Bov 11
form是一个block元素,块元素没有任何高度,除非它们的内容扩展或者它们被明确地赋予高度.最近的祖先#container是form,它的高度是0,所以 #container高度是0.
100%高度取决于具有明确声明高度的所有祖先.添加一个高度FORM,你的例子应该工作.
HTML, BODY, FORM {
height: 100%;
}
任何基于百分比的价值都是如此.如果父元素没有指定高度,则其框将根据内容调整大小.因此,孩子的百分比高度将基于为其父母计算的任何高度.