正确的css以确保body元素填充整个屏幕 [英] proper css to ensure that the body element fills the entire screen
问题描述
我的body元素有问题。它似乎是填充百分之百的屏幕。但是，如果你拖动浏览器小，然后向下滚动 - 主体不扩展。
I have a problem with my body element. It seems that it is filling 100% percent of the screen. However, if you drag the browser small and then scroll down - the body doesn't extend.
请参阅 this jsFiddle as一个典范。
Please see this jsFiddle as a prime example.
推荐答案
我相信这个FIDDLE 回答问题。我已经在生产中使用它了，它一直工作得很好。
I believe that THIS FIDDLE answers the question. I have been using this in production and it has been working great.
HTML：
<html>
<body>
<div class="main-wrapper contain">
<section class="main-content">
Main Content
</section> <!-- end .main-wrapper -->
<div class="other-thing">
Other thing for example.
</div>
</div> <!-- .main-wrapper -->
</body>
</html>
CSS：
/* hard reset */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
padding: 0; margin: 0;
}
/* micro clear fix (clears floats) */
.contain:before,
.contain:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.contain:after {
clear: both;
}
.contain {
*zoom: 1;
}
html {
height: 100%; /* 01 */
/* tells html to go ahead and feel free to be 100% height */
}
body {
min-height: 100%; /* 02 */
/* expands to push html to the limit */
}
.main-wrapper {
/* overflow: hidden; */
/* in this case - forces wrapper to contain content (like a clear-fix) */
/* use clear fix instead */
}
/* if you see yellow - we are failing */
.main-content {
width: 100%;
float: left;
}
.other-thing {
width: 100%;
float: left;
}
我测试过这个 - 保持所有的容器和东西实际上包含正确。必须有堕落到这个溢出：隐藏;或者人们不会使用clear-fix。所以 - 我会喜欢听到更多的输入。
I've tested this - and it seems to work in every situation, assuming that you keep all of your containers and stuff actually containing properly. There must be downfalls to this overflow: hidden; or people wouldn't use clear-fix. So - I would love hear more input.
或者，我认为html和body可以是100％，然后.main包装器可以min-height： 100％;并且工作也很好。基本上 - 东西需要强制所有的容器拉伸。为了做到这一点，所有这些容器必须设置为100％，以便他们记住他们有这种能力。或者是我对div太多了...
Alternatively, I think that the html and body can be 100% and then the .main-wrapper can be min-height: 100%; and that works as well. Basically - something needs to force all of its containers to stretch. and in order to do that, all of those containers must be set to 100% so that they remember that they have that ability. Or am I anthropomorphizing the divs too much...
这篇关于正确的css以确保body元素填充整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
