Question

我的身体元素有问题。它似乎正在填满100％的屏幕。但是，如果您将浏览器拖动得较小，然后向下滚动 - 主体不会延伸。

请参阅this jsFiddle作为主要示例。

Answer 1

height: 100%;是您网站显示的窗口高度，而不是网站的高度，这会导致背景在向下滚动时变为紫色。

只需添加：

html { background: green; }

然后删除

body { background: green; }

让背景始终为绿色。（JSFiddle）

Answer 2

我相信THIS FIDDLE回答了这个问题。我一直在生产中使用它，它一直很好用。

<强> 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。所以 - 我希望听到更多的意见。

或者，我认为html和body可以是100％然后.main-wrapper可以是min-height：100％;这也很有效。基本上 - 某些东西需要强迫所有容器伸展。为了做到这一点，所有这些容器必须设置为100％，以便他们记住他们有这种能力。或者我是否过多地将这些div拟人化......

Answer 3

只需从height: 100%;中删除<body>，然后从height: 300px;中移除<figure>，即可开始使用。

您也可以使用以下代码：http://jsfiddle.net/Asustaba/LBu8z/8/

Answer 4

1）如果你想让身体填满整个屏幕，同时解决两件事（由于身体有动态内容）

内容不够：身体至少与视口一样高，因为你的身体没有足够的内容来填充屏幕
内容太多：身体应该和html一样高

现在你可以使用 min-height：100vh ，这意味着100％的视口高度： http://jsfiddle.net/LBu8z/89/

除了Opera Mini之外，所有浏览器都支持它：caniuse.com/#search=vh

2）如果你想要一个固定的背景图像，那么我建议拉伸一个固定的位置体：之后

我需要在生产中使用这种解决方案，因为背景尺寸：封面不能正确使用固定的背景，因此我必须制作身体：固定后，背景图像不固定。您可以在此处查看：https://www.doklist.com/

body:after{
  content:"";
  background:green;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
}

3）如果你只想用身体做，那么：用溢出卷轴拉伸固定的身体。但请注意，它可能会干扰某些元素（例如，引导工具提示和弹出窗口）

body {
    background: green;
    overflow-y:scroll;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

适当的CSS以确保身体元素填满整个屏幕

4 个答案: