在测试了各种场景后，我认为这是最好的解决方案:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0;
    padding: 0;
}

它是动态的，因为如果html和body元素的内容溢出，它们将自动展开。我在最新版本的Firefox、Chrome和IE 11中进行了测试。

在这里看到完整的小提琴(对于你讨厌桌子的人，你可以随时改变它使用div):

https://jsfiddle.net/71yp4rh1/9/

话虽如此，这里公布的答案有几个问题。

html, body {
    height: 100%;
}

使用上面的CSS会导致html和body元素不会自动展开，如果它们的内容溢出，如下所示:

https://jsfiddle.net/9vyy620m/4/

当你滚动时，注意到重复的背景了吗?这是因为body元素的高度没有增加，因为它的子表溢出了。为什么它不像其他块元素那样展开?我不确定。我认为浏览器不正确地处理了这个问题。

html {
    height: 100%;
}

body {
    min-height: 100%;
}

如上所示，在body上设置最小高度为100%会导致其他问题。如果你这样做，你不能指定子div或表占用一个百分比高度，如下所示:

https://jsfiddle.net/aq74v2v7/4/

希望这能帮助到一些人。我认为浏览器没有正确地处理这个问题。如果子节点溢出，我希望身体的高度能够自动调整。然而，当你使用100%的高度和100%的宽度时，这似乎不会发生。

尝试将html元素的高度设置为100%。

html, 
body {
    height: 100%;
}

主体通过其父(HTML)查看如何缩放动态属性，因此HTML元素也需要设置它的高度。

然而，body的内容可能需要动态更改。 将min-height设置为100%将实现这一目标。

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

如果你想保持正文的边缘，不想要滚动条，使用下面的css:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

设置body {min-height:100%}将为您提供滚动条。

参见http://jsbin.com/aCaDahEK/2/edit?html,output上的演示。

我设计了div容器-通常是主体的唯一子元素，带有以下css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

我会用这个

html,身体{ 背景:#药剂; 最小高度:100%; 最小高度:100 vh; 溢出:汽车;// <-当你调整屏幕大小时，这是需要的 ｝ < html > 身体< > < /身体> < / html >

浏览器将使用min-height: 100vh，如果浏览器有点旧，则min-height: 100%将作为备用。

溢出:auto是必要的，如果你想要身体和html扩大他们的高度当你调整屏幕的大小(例如移动大小)

这里更新

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}