我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%，但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。
当前回答
关于底部的额外空间:你的页面是ASP ?网络应用程序?如果是这样，标记中可能几乎所有内容都被包装了。不要忘记设置表单的样式。添加溢出:隐藏;到窗体可能会删除底部的多余空间。
其他回答
适用于现代和传统浏览器的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%的浏览器。
好运！
如果你有一个背景图像，那么你会想要设置这个:
html{
height: 100%;
}
body {
min-height: 100%;
}
这可以确保当内容比视口高时，body标签可以继续增长，并且当你开始向下滚动时，背景图像会继续重复/滚动/等等。
记住，如果你必须支持IE6，你需要找到一种楔子在高度:100%的身体，IE6对待高度像最小高度。
在20多个答案之后，似乎没有一个人提到了我发现的最关键的因素——标记。
在尝试了这个问题和其他一些问题的基本每个答案之后，我重新构造了我的标记，如下所示:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
本质上，它需要两个不同的外部容器。第一个容器用于包含导航栏，并将背景色/图像一直扩展到浏览器的高度，第二个容器用于包含“折叠以下”的所有内容——包括第二个背景色/图像。
这个解决方案允许第一个容器的背景一直扩展到底部，同时保持第二个容器的自由，以占用尽可能多的空间。
从这一点开始，唯一需要得到我和原始问题想要的结果的CSS如下:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
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%
}
适用于所有主要浏览器:FF, Chrome, Opera, IE9+。工作与背景图像和梯度。滚动条可根据内容需要使用。
除了将html和body元素的高度同时设置为100%，你还可以使用viewport-percentage length。
5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。
在这个例子中，你可以使用值100vh——这是视口的高度。
例子
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
这在大多数现代浏览器中都是支持的-可以在这里找到支持。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
