jquery - 将 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 以将其置于屏幕高度以下。

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

<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>

---

相对定位

如果您不想使用定位，您可以在 main div 上使用(代替)一个 min-height 属性:

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

<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>