我想让身体拥有100%的浏览器高度.我可以使用CSS吗？
我试过设置height: 100%,但它不起作用.
我想为页面设置背景颜色以填充整个浏览器窗口,但如果页面内容很少,我会在底部看到一个丑陋的白色条.
Ben*_*ing 1008
尝试将html元素的高度设置为100%.
html,
body {
height: 100%;
}
Body查看其父级(HTML)以了解如何扩展动态属性,因此HTML元素也需要设置它的高度.
然而,身体的内容可能需要动态改变.将min-height设置为100%将实现此目标.
html {
height: 100%;
}
body {
min-height: 100%;
}
Jos*_*ier 204
作为设置html和body元素高度的替代方法100%,您还可以使用视口百分比长度.
5.1.2.视口百分比长度:'vw','vh','vmin','vmax'单位
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
在这种情况下,您可以使用值100vh- 视口的高度.
body {
height: 100vh;
}
body {
min-height: 100vh;
}
大多数现代浏览器都支持此功能 - 可在此处找到支持.
Ang*_*Dan 119
如果你有背景图像,那么你需要设置它:
html{
height: 100%;
}
body {
min-height: 100%;
}
这样可以确保当内容高于视口时允许您的body标签继续增长,并且当您开始向下滚动时背景图像会继续重复/滚动/滚动.
记住,如果你必须支持IE6,你将需要找到一种方法来楔入height:100%身体,IE6 height就像对待一样min-height.
dpa*_*tru 75
如果要保留正文的边距而不想滚动条,请使用以下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上的演示.
Cat*_*ish 29
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
OwN*_*OwN 21
在测试了各种场景之后,我相信这是最好的解决方案:
html {
width:100%;
height: 100%;
display: table;
}
body {
width:100%;
display:table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
它是动态的,因为如果内容溢出,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%;
}
如上所示在身体上设置100%的最小高度会导致其他问题.如果执行此操作,则无法指定子div或表占用百分比高度,如下所示:
https://jsfiddle.net/aq74v2v7/4/
希望这有助于某人.我认为浏览器处理错误.如果它的孩子溢出,我希望身体的高度自动调整增长.但是,当您使用100%高度和100%宽度时,似乎不会发生这种情况.
Min*_*t12 20
在我使用的每个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>一个margin:-8px;让它适合浏览器窗口的角落.
在我发布之前,我查看了我的另一个全屏CSS项目,发现我在那里使用的所有内容都是正确的body{margin:0;},没有别的,这两年来我一直在努力工作.
希望这个详细的答案有所帮助,我感受到你的痛苦.在我看来,浏览器应该在左侧,有时在body/html元素的顶部设置一个不可见的边界是愚蠢的.
Jay*_*ney 18
快速更新
html, body{
min-height:100%;
overflow:auto;
}
使用今天的CSS更好的解决方案
html, body{
min-height: 100vh;
overflow: auto;
}
Most of the other solutions posted here will not work well in legacy browsers! And some of the code people posted will cause a nasty overflow of text beyond 100% height in modern browsers where text flows past background colors, which is bad design! So please try my code solution instead.
The CSS code below should support flexible web page height settings correctly in all known browsers, past and present:
html {
height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}
body {
height: auto; /* Allows content to grow beyond the page without overflow */
width: auto; /* Allows content to grow beyond the page without overflow */
min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar. Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
margin: 0;
padding: 0;
background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}
NOTES ON THE CODE ABOVE
In many older, as well as newer browsers, if you do not set 100% height on the <html> selector, body will never achieve 100% height! So that is critical here.
The new viewport units ("vh") are redundant on the body selector and not necessary as long as you have set html selector to a height of either 100% or 100vh. The reason is the body always derives its values from the html parent. The exception is a few very old browsers from the past, so its best to set some height value for the body.
Some modern browsers using the body selector will not know how to inherit the viewport height directly. So again, always set your html selector to 100% height! You can still use "vh" units in body to bypass the parent html value and get its property dimensions directly from the viewport in most modern browsers, however. But again, its optional if the parent or root html selector has 100% height, which body will always inherit correctly.
Notice I've set body to height:auto, not height:100%. This collapses the body element around content initially so it can grow as content grows. You do NOT want to set body height and width to 100%, or specific values as that limits content to the body's current visual dimensions, not its scrollable dimensions. Anytime you assign body height:100%, as soon as content text moves beyond the browser's height, it will overflow the container and thus any backgrounds assigned to the original viewport height, creating an ugly visual! height:auto is your best friend in CSS!
But you still want body to default to 100% height, right? That is where min-height:100% works wonders! It will not only allow your body element to default to 100% height, but this works in even the oldest browsers! But best of all, it allows your background to fill 100% and yet stretch farther down as content with height:auto grows vertically.
Using overflow:auto properties are not needed if you set height:auto on the body. That tells the page to let content expand height to any dimension necessary, even beyond the viewport's height, if it needs to and content grows longer than the viewport page display. It will not break out of the body dimensions. And it does allow scrolling as needed. overflow-y:scroll allows you to add an empty scrollbar to the right of the page content by default in every web browser. The scrollbar only appear inside the scroll bar area if content extends beyond 100% height of the viewport. This allows your page width, and any margins or paddings to be calculated by the browser beforehand and stop the pages from shifting as users view pages that scroll and those that do not. I use this trick often as it sets the page width perfectly for all scenarios and your web pages will never shift and load lightning fast!
I believe height:auto is the default on body in most UA browser style sheets. So understand most browsers default to that value, anyway.
Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
The two CRITICAL pieces here are not the units, like % or vh, but making sure the root element, or html, is set to 100% of the viewport height. Second, its important that body have a min-height:100% or min-height:100vh so it starts out filling the viewport height, whatever that may be. Nothing else beyond that is needed.
STYLING HEIGHT FOR LEGACY BROWSERS
Notice I have added "fallback" properties for height and min-height, as many browsers pre-2010 do not support "vh" viewport units. It's fun to pretend everyone in the web world uses the latest and greatest but the reality is many legacy browsers are still around today in big corporate networks and many still use antiquated browsers that do not understand those new units. One of the things we forget is many very old browsers do not know how to fill the the viewport height correctly. Sadly, those legacy browsers simply had to have height:100% on both the html element and the body as by default they both collapsed height by default. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. The example above should solve all that for you and still work in newer browsers.
Before modern HTML5 browsers (post-2010) we solved that by simply setting height:100% on both the html and body selectors, or just min-height:100% on the body. So either solution allows the code above to work in over 20+ years of legacy web browsers rather than a few created the past couple of years. In old Netscape 4 series or IE 4-5, using min-height:100% instead of height:100% on the body selector could still cause height to collapse in those very old browsers and cause text to overflow background colors. But that would be the one issue I could see with this solution.
Using my CSS solution, you now allow your website to be viewed correctly in 99.99% of browsers, past and present rather than just 60%-80% of browsers built the past few years.
Good Luck!
这里：
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
小智 5
如果需要，您也可以使用 JS
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
我会用这个
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>浏览器将使用min-height: 100vh，如果浏览器有点旧，则将min-height: 100%作为后备。
overflow: auto如果您希望在调整屏幕大小（例如移动设备大小）时主体和 html 扩展其高度，则这是必需的