除了将html和body元素的高度同时设置为100%，你还可以使用viewport-percentage length。

5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

在这个例子中，你可以使用值100vh——这是视口的高度。

例子

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

这在大多数现代浏览器中都是支持的-可以在这里找到支持。

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

html, 
body {
    height: 100%;
}

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

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

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

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

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

请检查这个:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

或者尝试新的方法Viewport height:

html, body { width: 100vw; height: 100vh;}

视窗: 如果你使用视口意味着任何大小的屏幕内容都将达到屏幕的全高。

除了将html和body元素的高度同时设置为100%，你还可以使用viewport-percentage length。

5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

在这个例子中，你可以使用值100vh——这是视口的高度。

例子

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

这在大多数现代浏览器中都是支持的-可以在这里找到支持。

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

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%的宽度时，这似乎不会发生。