我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
当前回答
快速更新
html, body{
min-height:100%;
overflow:auto;
}
今天的CSS更好的解决方案
html, body{
min-height: 100vh;
overflow: auto;
}
其他回答
如果你有一个背景图像,那么你会想要设置这个:
html{
height: 100%;
}
body {
min-height: 100%;
}
这可以确保当内容比视口高时,body标签可以继续增长,并且当你开始向下滚动时,背景图像会继续重复/滚动/等等。
记住,如果你必须支持IE6,你需要找到一种楔子在高度:100%的身体,IE6对待高度像最小高度。
如果你想保持正文的边缘,不想要滚动条,使用下面的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,output上的演示。
对于真正的纯粹主义者来说,这种方法尊重浏览器的默认边距,并防止由其他方法产生的不需要的滚动,除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……
html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }
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%的宽度时,这似乎不会发生。