使主体有100%的浏览器高度

我想让主体有100%的浏览器高度。我可以用CSS来做吗?

我试着设置高度:100%，但它不起作用。

我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。

当前回答

快速更新

html, body{
    min-height:100%;
    overflow:auto;
}

今天的CSS更好的解决方案

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

2015-08-03 22:49:49

其他回答

关于底部的额外空间:你的页面是ASP ?网络应用程序?如果是这样，标记中可能几乎所有内容都被包装了。不要忘记设置表单的样式。添加溢出:隐藏;到窗体可能会删除底部的多余空间。

2013-04-11 20:58:01

适用于现代和传统浏览器的CSS高度

这里发布的大多数其他解决方案在传统浏览器中都不能很好地工作!人们发布的一些代码会在现代浏览器中导致文本溢出，超过100%的高度，这是糟糕的设计!所以请尝试我的代码解决方案。

下面的CSS代码应该支持灵活的网页高度设置在所有已知的浏览器，过去和现在:

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! */
}

上面代码的注释

在许多较老的浏览器中，如果你没有在<html>选择器上设置100%高度，body将永远不会达到100%高度!这很关键。

新的视口单位(“vh”)在主体选择器上是多余的，而不是必要的，只要你已经将html选择器的高度设置为100%或100vh。原因是主体总是从html父类派生它的值。例外的是一些过去非常老的浏览器，所以最好为body设置一些高度值。

一些使用body选择器的现代浏览器不知道如何直接继承视口高度。再次强调，始终将html选择器设置为100%高度!但是，在大多数现代浏览器中，您仍然可以在body中使用“vh”单元来绕过父html值，并直接从视口获取其属性尺寸。但同样，如果父或根html选择器有100%的高度，它是可选的，body将始终正确继承。

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!

但你还是想让身体默认为100%高度，对吧?这就是最小高度:100%可以创造奇迹的地方!它不仅允许你的身体元素默认为100%的高度，但这是在最古老的浏览器!但最重要的是，它可以让你的背景100%填充，并随着内容的高度进一步延伸:自动垂直增长。

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!

我相信height:auto是大多数UA浏览器样式表的默认值。所以要明白大多数浏览器默认都是这个值。

添加min-height:100%可以让你得到你想要的body的默认高度，然后允许页面尺寸填充viewport，而不需要跳出body的内容。这只是因为html已经根据viewport派生了它的100%高度。

这里的两个关键部分不是单位，如%或vh，而是确保根元素或html被设置为视口高度的100%。其次，重要的是，body有一个min-height:100%或min-height:100vh，这样它开始填充视口高度，不管那可能是什么。除此之外不需要其他任何东西。

传统浏览器的样式高度

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.

使用我的CSS解决方案，您现在可以在99.99%的浏览器(过去和现在)中正确地查看您的网站，而不仅仅是过去几年构建的60%-80%的浏览器。

好运！

2021-01-21 21:54:47

在这里:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

2011-07-11 18:56:14

如果需要，你也可以使用JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

2016-11-28 15:04:09

在测试了各种场景后，我认为这是最好的解决方案:

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%的宽度时，这似乎不会发生。

2016-08-12 00:58:24

使主体有100%的浏览器高度

推荐文章

最新文章

标签