html - 页面下的内容流

Question

我不知道如何正确地将其放入问题中，但是有没有一种方法可以使包装 div float 在页面下方，这意味着无论有多少空白空间，它都会在媒体屏幕在底部结束时立即开始离开了？

例如，

<div class="wrapper 1">
    <h1>Heading</h1>
    <p>A text of something interesting</p>
</div>

<div class="wrapper-2"> <!-- This DIV needs to start right under the media screen -->
    <h1>Heading</h1>
    <p>A text of something interesting</p>
</div>

Answer 1

如果您希望将 wrapper-2 元素放在网页的底部，而不管您的内容有多薄，您可以考虑以下几点:

<div id="wrap">
    <div id="wrapper-1">header</div>
    <div id="main">main content</div>
</div>
<div id="wrapper-2">footer</div>

还有 CSS:

html, body {
    height: 5000px; /* obscene number strictly for your visual convenience */
}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    padding-bottom: 150px;
}
 #wrapper-2 {
    position: relative;
    clear:both;
}
/*Opera Fix*/
 body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

Here's a Fiddle

更多可以在上面的例子中找到here

但是，如果您只是在寻找一个简单的粘性页脚:

<div id="wrapper-2">footer</div>

还有 CSS:

body { overflow-x:hidden; }

#wrapper-2 {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}

Simple sticky-footer Fiddle