请检查这个:

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

或者尝试新的方法Viewport height:

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

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

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

html, 
body {
    height: 100%;
}

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

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

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

对于真正的纯粹主义者来说，这种方法尊重浏览器的默认边距，并防止由其他方法产生的不需要的滚动，除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……

html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }

如果你有一个背景图像，那么你会想要设置这个:

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

这可以确保当内容比视口高时，body标签可以继续增长，并且当你开始向下滚动时，背景图像会继续重复/滚动/等等。

记住，如果你必须支持IE6，你需要找到一种楔子在高度:100%的身体，IE6对待高度像最小高度。

我会用这个

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

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

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

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

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