位置Div低于窗口高度

Question

让我们看下面的例子

<div>Main Content<br><br>Main Content which fills windows height</div>
<div id="belowcontent">Content to be show below the windows height</div>

我尝试了类似下面的内容

$("#belowcontent").css("margin-top", $(window).height());

但这里的问题是div使用的是前一个DIV的高度，而不是浏览器的顶部。我也尝试过绝对的位置。还没有工作。

P.s：如果是纯CSS方法，那就是优势

Answer 1

绝对定位

您可以使用absolute声明使用top定位。在这种情况下，我将top设置为100vh，将其置于屏幕高度以下。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  background: lightgray;
}
.main {
  background: cornflowerblue;
}
#belowcontent {
  position: absolute;
  top: 100vh;
  background: tomato;
}

＆＃13;

<div class="main">Main Content
  <br>
  <br>Main Content which fills windows height</div>
<div id="belowcontent">Content to be show below the windows height</div>

＆＃13;

＆＃13;

＆＃13;

相对定位

如果您不想使用定位，您可以在main div上使用（代替）最小高度属性：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.main {
  min-height: 100vh;
  background: cornflowerblue;
}
#belowcontent {
  background: tomato;
}

＆＃13;

<div class="main">Main Content
  <br>
  <br>Main Content which fills windows height</div>
<div id="belowcontent">Content to be show below the windows height</div>

＆＃13;

＆＃13;

＆＃13;