为什么身体的高度不符合html的高度？
这是我的代码。
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%; }
</style>
</head>
<body>
</body>
</html>
Chrome浏览器，Firefox浏览器和Safari浏览器都会显示HTML元素，其高度等于浏览器窗口的高度，但高度为0的主体元素将主体元素的高度（不只是最小高度）设置为100％没有帮助。 body元素的高度应该等于其父元素的100％，这个html元素的高度等于窗口的高度。 那为什么不呢？
尝试限制其高度始终只有100％使用height和min-height ，如下所示：
html, body {
min-height: 100%;
height: 100%;
}
工作的例子
另一种可能的方法是给父（在这种情况下， html标签）100％的高度，然后给孩子（ body标签）的min-height ，如下所示：
html {
height:100%;
}
body {
min-height: 100%;
}
工作的例子
这是一个类似的问题，可以回答更深入的问题 - 让身体拥有100％的浏览器高度
这不起作用的原因是基于百分比的height值需要在父元素上设置height （基于视口的html节点除外）。 尽管浏览器将始终将html节点呈现为完整的浏览器，但实际上您需要在CSS中为body设置height ，以将百分比作为基准。 我相信你正在寻找的是以下内容。
html {
height: 100%;
}
body {
min-height: 100%;
}
的jsfiddle
这是一个更清洁的解决方案，将body和html设置为height: 100%; 因为身体通常会大于视口的100％。
我认为这是工作。添加bgcolor到你的身体元素，看看它是否是100％。 我试过下面的代码正在工作 -
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%;}
</style>
</head>
<body bgcolor="#00CC33">
<div>HELLO</div>
</body>
</html>