Question

这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body { min-height: 100%; }
    </style>
  </head>
  <body>
  </body>
</html>

Chrome浏览器，Firefox和Safari检查员都显示高度等于浏览器窗口的html元素应该是这种情况，但是高度为0的body元素。设置body元素的高度（不仅仅是min-height）到100％没有帮助。 body元素的高度应该等于其父元素的100％，即html元素，其高度等于窗口。那么为什么不呢？

Answer 1

尝试使用height和min-height将其高度限制为始终只有100％，如下所示：

html, body {
    min-height: 100%;
    height: 100%;
}

<强> WORKING EXAMPLE

另一种可能的方法是给父母（在这种情况下，html标签）高度为100％，然后给孩子（body标签）min-height，像这样：

html {
    height:100%;
}

body {
    min-height: 100%;
}

<强> WORKING EXAMPLE

以下是一个类似的问题，可以回答更深入的问题 - Make body have 100% of the browser height

Answer 2

这不起作用的原因是基于百分比height值要求在父元素上设置height（html节点除外，该节点基于视口）。虽然浏览器始终将html节点呈现为完整浏览器，但实际上您需要在CSS中为height设置body以使百分比偏离。我相信你要找的是以下内容。

html {
    height: 100%;
}
body {
    min-height: 100%;
}

JSFiddle

这是将body和html设置为height: 100%;的更简洁的解决方案，因为正文通常会大于视口的100％。

Answer 3

我认为它有效。将bgcolor添加到你的身体元素，看看它是否是100％。我尝试使用正在运行的代码 -

<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%;}
</style>
</head>
<body bgcolor="#00CC33">
<div>HELLO</div>
</body>
</html>

Answer 4

至于min-height无效的原因，请参阅：child inside parent with min-height 100% not inheriting height

另请注意，使用body,html { height: 100% }代替，工作正常。

http://jsfiddle.net/ND74j/

Answer 5

将height限制为始终为其父元素的高度将起作用，但您需要添加轻量级CSS重置：

html, body{
    min-height:100%;
    height:100%;
    padding:0;
    margin:0;
}

要获得完整的CSS重置，请参阅normalize.css

Answer 6

这是我最近遇到的事情，并且可以通过以下方法解决：

body {
    display: inline-block;
    min-height: 100vh;
    width: 100%;
}


// this class is a div containing all your page's content

.body {
    width: 1400px; // arbitrary number
    margin: auto;
}

为什么身体的高度与html的高度不匹配？

6 个答案: