我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%,但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口,但如果页面内容很少,我就会在底部得到一个丑陋的白色条。
当前回答
如果你想保持正文的边缘,不想要滚动条,使用下面的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上的演示。
其他回答
在这里:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
我在每个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元素不会因为浏览器默认值而自动将其中的所有内容下推或右推。
宽度和高度变量被设置为100%,以确保浏览器不会在预期实际有一个自动设置的边距或填充时调整它们的大小,设置最小值和最大值只是为了以防一些奇怪的,无法解释的事情发生,尽管你可能不需要它们。
这个解决方案也意味着,就像我在几年前第一次开始使用HTML和CSS时所做的那样,你不必给你的第一个<div>一个边距:-8px;使它适合浏览器窗口的角落。
在我发布之前,我看了看我的另一个全屏CSS项目,发现我在那里使用的只是body{margin:0;},没有其他东西,这在我工作的2年里工作得很好。
希望这个详细的回答能有所帮助,我能感受到你的痛苦。在我看来,浏览器应该在body/html元素的左侧(有时是顶部)设置一个看不见的边界是愚蠢的。
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
关于底部的额外空间:你的页面是ASP ?网络应用程序?如果是这样,标记中可能几乎所有内容都被包装了。不要忘记设置表单的样式。添加溢出:隐藏;到窗体可能会删除底部的多余空间。
这里更新
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}