我想让主体具有浏览器高度的100％。我可以使用CSS吗？
我尝试设置height: 100%，但不起作用。
我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。
使主体具有浏览器高度的100％
第1682篇《使主体具有浏览器高度的100％》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共15个回答
@media all {
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
} }
Here Update
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
Try adding:
body {
height: 100vh;
}
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%
}
Works for all major browsers: FF, Chrome, Opera, IE9+. Works with Background images and gradients. Scrollbars are available as content needs.
I would use this
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>The browser will use min-height: 100vh and if somehow the browser is a little older the min-height: 100% will be the fallback.
The overflow: auto is necessary if you want the body and html to expand their height when you resize the screen (to a mobile size for example)
Here:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
Please check this:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
Or try new method Viewport height :
html, body { width: 100vw; height: 100vh;}
Viewport: If your using viewport means whatever size screen content will come full height fo the screen.
Only with 1 line of CSS… You can get this done.
body{ height: 100vh; }
快速更新
html, body{
min-height:100%;
overflow:auto;
}
当今CSS的更好解决方案
html, body{
min-height: 100vh;
overflow: auto;
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
如果您有背景图片，则可以设置为：
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%} 将为您提供滚动条。
尝试将html元素的高度也设置为100％。
html,
body {
height: 100%;
}
Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。
但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现此目标。
html {
height: 100%;
}
body {
min-height: 100%;
}
相似问题
问题类别
CSS3 has a new method.
It makes ViewPort 100% equal to the height.
So your Code should be