页面下的内容流

Question

我不知道如何正确地将此放入问题中，但是否有一种方法，即包装器div漂浮在页面下，这意味着无论留下多少空白，当媒体屏幕在底部结束时，它都会从右侧开始？

例如,

<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

Answer 2

如果我对您的问题的理解是正确的，那么您希望将第二个div隐藏在视区的下面。

将div设置为position: absolute和top: 100%。这会将div推到可见区域之外；然后可以将其滚动到。

注意:目前，如果内容溢出超过可见区域，它将覆盖第二个div。不确定这是否是你想要实现的目标的问题。

​

.wrapper-2 {
  position: absolute;
  top: 100%;
}

<div class="wrapper 1">
  <h1>The Second div is hidden, SCROLL!</h1>
  <p>The Second div is hidden, SCROLL</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>

​