使主体具有浏览器高度的 100％

我想让主体具有浏览器高度的 100％。我可以使用 CSS 吗？

我尝试将height: 100%设置height: 100% ，但不起作用。

我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。

html css height

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

html, 
body {
    height: 100%;
}

Body 向其父级（HTML）寻求如何缩放动态属性，因此 HTML 元素也需要设置其高度。

但是，身体的内容可能需要动态更改。将最小高度设置为 100％将实现此目标。

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

作为将html和body元素的高度都设置为100%的替代方法，您还可以使用视口百分比长度。

5.1.2。视口百分比长度：“vw”，“vh”，“vmin”，“vmax” 单位
视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

在这种情况下，您可以使用值100vh这是视口的高度。

这里的例子

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

大多数现代浏览器都支持此功能 - 支持可在此处找到。

如果您有背景图片，则可以设置为：

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

这样可以确保当内容比视口高时，您的 body 标签可以继续生长，并且当您向下滚动时，背景图像可以继续重复 / 滚动 / 随处可见。

请记住，如果您必须支持 IE6，则需要找到一种提高height:100%用于身体，IE6 还是将height视为min-height 。

如果要在正文上保留边距并且不希望使用滚动条，请使用以下 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 上的演示，输出。

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

实际上，在我使用的每个 CSS 文件的开头都使用了以下内容：

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

边距 0 确保 HTML 和 BODY 元素不会被浏览器自动定位，以使其左侧或右侧有一些空间。

填充 0 可以确保 HTML 和 BODY 元素不会因为浏览器的默认设置而自动向下或向右推送其中的所有内容。

将 width 和 height 变量设置为 100％，以确保浏览器不会因为预期会自动设置边距或填充而调整它们的大小，并且设置了 min 和 max 以防万一发生一些奇怪的无法解释的事情，尽管您可能不需要它们。

这种解决方案还意味着，就像几年前刚开始使用 HTML 和 CSS 时一样，您不必为第一个<div> margin:-8px;出一个margin:-8px;使其适合浏览器窗口的一角。

在发布之前，我查看了我的另一个全屏 CSS 项目，发现我只用了body{margin:0;} ，就没有其他东西了，在我从事此工作的 2 年中，它一直运行良好。

希望这个详细的答案能对您有所帮助，让我感到您的痛苦。在我看来，浏览器应该在 body / html 元素的左侧（有时是顶部）设置一个不可见的边界，这是愚蠢的。

经过各种场景的测试，我相信这是最好的解决方案：

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

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

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

动态的是，如果 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%;
}

如上所示将最小高度设置为 100％会导致其他问题。如果执行此操作，则不能指定子 div 或表占据百分比高度，如下所示：

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

希望这对某人有帮助。我认为浏览器处理不正确。我希望如果孩子溢出，身体的高度会自动调整为更大。但是，当您使用 100％的高度和 100％的宽度时，似乎不会发生这种情况。

快速更新

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

当今 CSS 的更好解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

这里：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

请检查以下内容：

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

或尝试新方法视口高度：

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

视口：如果您使用视口，则无论屏幕尺寸大小如何，屏幕内容都会全屏显示。