我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
当前回答
尝试将html元素的高度设置为100%。
html,
body {
height: 100%;
}
主体通过其父(HTML)查看如何缩放动态属性,因此HTML元素也需要设置它的高度。
然而,body的内容可能需要动态更改。 将min-height设置为100%将实现这一目标。
html {
height: 100%;
}
body {
min-height: 100%;
}
其他回答
如果你不想编辑自己的CSS文件并自己定义高度规则,最典型的CSS框架也解决了这个问题,body元素填充整个页面,以及其他问题,轻松地使用多种大小的视口。
例如,Tacit CSS框架解决了这个问题,你不需要定义任何CSS规则和类,你只需要在HTML中包含CSS文件。
html, body
{
height: 100%;
margin: 0;
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%的宽度时,这似乎不会发生。
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
适用于所有主要浏览器:FF, Chrome, Opera, IE9+。工作与背景图像和梯度。滚动条可根据内容需要使用。
尝试将html元素的高度设置为100%。
html,
body {
height: 100%;
}
主体通过其父(HTML)查看如何缩放动态属性,因此HTML元素也需要设置它的高度。
然而,body的内容可能需要动态更改。 将min-height设置为100%将实现这一目标。
html {
height: 100%;
}
body {
min-height: 100%;
}