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>

页面下的内容流

2 个答案: