使身体有100％的浏览器高度

2018-05-29 20:27:05

我想让身体拥有100％的浏览器高度。我可以使用CSS来做到这一点吗？

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

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

尝试将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%;
}

这可确保当内容高于视口时允许您的身体标记继续增长，并且当您开始向下滚动时，背景图像会继续重复/滚动/任何内容。

请记住，如果您必须支持IE6，您需要找到一种height:100%楔入方式height:100%身体height:100% ，IE6尽可能将height视为min-height 。

链接地址: http://www.djcxy.com/p/2569.html