我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%，但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。
当前回答
在这里:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
其他回答
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
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+。工作与背景图像和梯度。滚动条可根据内容需要使用。
适用于现代和传统浏览器的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%的浏览器。
好运！
如果你想保持正文的边缘，不想要滚动条，使用下面的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上的演示。
所有的答案都是100%正确的，并且解释得很好， 但我做了一些很好的和非常简单的事情使它有响应。
这里元素将占用100%的视图高度，但当涉及到移动视图时，它看起来不太好，特别是在纵向视图(移动)上，所以当视图端口变得越来越小时，元素将会折叠并相互重叠。为了让它的响应更小，这里有代码。 希望有人能从中得到帮助。
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
这里是JSfiddle演示。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
