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

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

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

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

当前回答

对于真正的纯粹主义者来说，这种方法尊重浏览器的默认边距，并防止由其他方法产生的不需要的滚动，除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……

html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }

2022-06-25 06:15:19

其他回答

尝试将html元素的高度设置为100%。

html, 
body {
    height: 100%;
}

主体通过其父(HTML)查看如何缩放动态属性，因此HTML元素也需要设置它的高度。

然而，body的内容可能需要动态更改。将min-height设置为100%将实现这一目标。

html {
  height: 100%;
}
body {
  min-height: 100%;
}

2011-07-11 18:53:54

我设计了div容器-通常是主体的唯一子元素，带有以下css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

2020-12-23 04:12:32

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

2011-07-11 18:54:28

适用于现代和传统浏览器的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

我在每个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元素的左侧(有时是顶部)设置一个看不见的边界是愚蠢的。

2015-10-28 02:32:51

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

推荐文章

最新文章

标签