min-height属性在body标签上无效。

Question

min-height在body/html上不起作用吗？

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

完全没有任何作用（firebug报告body、html标签的高度根本没有改变）

- Razor Storm

Answer 1

首先，如果你还没有声明文档类型，那么请先声明一个文档类型以确保你处于标准模式。

现在，页面的高度只能与包含它的HTML元素一样高，因此你需要将HTML元素的高度设置为100％，并将body元素的最小高度设置为100％。这对于我在Firefox上有效。

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

- Moses

---

太棒了，那个方法起作用了。接下来有一个问题：我现在已经将 body 的最小高度设置为 100%。现在我在 body 中又加入了另一个 div，我希望该 div 的最小高度也是 100%。我尝试了一下，但好像没有起作用。 - Razor Storm

将min-height添加到body中无效，即使使用html min-height 100%也是如此。 - chovy

@chovy，你误读了我的回答，认为你只需要 min-height。在我的例子中，我说过 html {height:100%} body {min-height:100%}。这应该可以工作，而且 Razor 也接受了它。 - Moses

这个可以工作，但是我会得到额外的垂直滚动条，超出窗口的高度。 - chovy

不需要查看。它是margin、padding或border。请查看box-sizing: border-box。 - Stijn de Witt

Answer 2

没有设置硬编码高度，Chrome 64也能正常工作：

html {
    min-height: 100%;
    display: flex;
}

body {
    flex: 1;
}

- Guy

---

与 SO 上的所有其他答案不同，这个实际上适用于以下情况：1）如果有空闲空间，则允许 div 占据 body 的 100%。2）如果存在滚动条，则不会将 body 大小限制为视口大小。但是它在跨浏览器方面如何？ - You Care

看起来min-height得到了广泛支持（IE7及以上版本，所有移动浏览器） https://caniuse.com/#feat=minmaxwh， flex-box需要IE10及以上版本： https://caniuse.com/#feat=flexbox。 您可以使用脚本（例如：https://github.com/jonathantneal/flexibility）或者postCSS来为IE8+实现display:flex的polyfill。 - Guy

Answer 3

不是所有的浏览器都支持min-height，尝试使用以下代码以兼容所有浏览器。

  min-height:100%;
  height:auto !important;
  height:100%;

- Zachary

---

这是真的，你的建议是唯一对我有用的事情！谢谢！ - Fillype Farias

Answer 4

我只用以下方法解决了问题：

body {
    min-height: 100vh;
}

- Damjan Pavlica

---

我使用了：html，body { min-height: 100vh; } - Douglas Ianitsky

Answer 5

以上回答都不适用于我。

我的做法：

html, body {
  height: 100%;
  display: grid;
}

- Alexandre Piva

Answer 6

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

你必须添加

- Alina Yi