jquery - 如果有另一个div，如何在底部制作一个div？

Question

我有 3 个 div。我想要一个 div 位于页面底部。

<div id="abc">
</div>
<div id="two">
</div>
<div id="three">
</div>

abc 是页面的标题。 two 是页面上显示的文章。 two 是页面的页脚。 我想要 div two 位于页面底部。如果我没有任何文章，那么 two div 也必须显示在页面底部。two div 此时将为空。如果 there 有很多文章，当我向下滚动到页面末尾时，它必须显示 two div。 请解释一下。 预先感谢您。

Answer 1

您可以使用 flexbox 很好地完成此任务。我在下面举了两个例子。希望这有帮助!

下面是没有内容时页脚位于底部的演示:

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

#header {
  background: pink;
  height: 50px;
}

#footer {
  background: skyblue;
  height: 50px;
}

#articles {
  background: lightgreen;
  flex: auto;
}

<div class="container">
  <div id="header"></div>
  <div id="articles"></div>
  <div id="footer"></div>
</div>

这是一个具有相同样式的演示，展示了当内容足够时如何将页脚下推:

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

#header {
  background: pink;
  height: 50px;
}

#footer {
  background: skyblue;
  height: 50px;
}

#articles {
  background: lightgreen;
  flex: auto;
}

span {
  display: block;
  font-size: 2em;
  margin: 1em 0;
}

<div class="container">
  <div id="header"></div>
  <div id="articles">
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
    <span>Article</span>
  </div>
  <div id="footer"></div>
</div>