最小高度不适用于身体答案

【问题标题】：min-height does not work with body最小高度不适用于身体
【发布时间】：2011-04-14 00:48:10
【问题描述】：

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

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

什么都不做（萤火虫报告正文，html标签高度根本没有改变）

【问题讨论】：

标签： html css

【解决方案1】：

首先，声明一个 doctype，如果你还没有，那么你就在标准中。

现在，body 只能和包含的 html 一样高，所以你需要将 HTML 标签设置为 100% 高度，并将 body 设置为 min-height 100%。这适用于 Firefox。

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

【讨论】：

太棒了，一个后续问题：我现在将 body 设置为 min-height: 100%。现在我在 body 中有另一个 div，我希望它也是 min-height:100%;，我这样做了，但它不起作用。
将 min-height 添加到 body 不起作用，即使 html min-height 100%
@chovy 你误读了我的回答，说你只需要min-height。在我的例子中，我说html {height:100%} body {min-height:100%}。这应该行得通，而且对于接受它的 Razor 来说肯定是行得通的。
这行得通，但是我得到了额外的垂直滚动。超出窗口的高度。
不用看。它是边距、填充或边框。查看box-sizing: border-box

【解决方案2】：

这适用于 chrome 64，无需设置硬编码高度：

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

body {
    flex: 1;
}

【讨论】：

与 SO 上的所有其他答案不同，这实际上适用于下一个案例：1）如果有可用空间，则允许 div 成为主体的 100%。 2）如果有滚动，则不会将主体大小限制为视口大小。但它是如何跨浏览器的呢？
似乎 min-height 被广泛支持（IE7 及更高版本，所有移动浏览器）caniuse.com/#feat=minmaxwh，flex-box 需要 IE10 及更高版本：caniuse.com/#feat=flexbox。您可能会使用诸如 github.com/jonathantneal/flexibility 或 postCSS 之类的脚本为 IE8+ 填充 display:flex。

【解决方案3】：

不是所有的浏览器都像 min-height 一样，试试这样的方法来捕获所有的浏览器。

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

【讨论】：

【解决方案4】：

我解决了这个问题：

body {
    min-height: 100vh;
}

【讨论】：

【解决方案5】：

以上答案都不适合我。

我做了什么：

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

【讨论】：

【解决方案6】：

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

你必须添加

【讨论】：