javascript - 在页面底部设置多个div元素为 "position: fixed"

Question

我的页面上有 4 个 div。我想将这 4 个 div 设置在底部，这样即使有滚动条，这些 div 也留在底部。

这是我的 HTML。

<div id="content">
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />
Lorum Ipsum Dolor Sit <br />

Long Dummy content.
</div>
<div class="footerdiv">Footer - scroll 1</div>
<div class="footerdiv">Footer - scroll2</div>
<div class="footerdiv">Footer - scroll 3</div>
<div class="footerdiv">Footer - scroll4</div>

还有我的CSS

.footerdiv {
    position: fixed;
    bottom: 0;
    width: 100px;
}

它正在将我的 div 设置在底部，但是所有底部的 div 都是重叠的。 我想通过将所有 4 个 div 放在底部来并排显示它们。

JsFiddle

Answer 1

不是将每个元素都放在底部，而是包裹元素并将父元素的 position 设置为 fixed 并将其放在底部。

在这样做时，.footerdiv 元素仍然处于正常流中，并且它们可以彼此相邻放置。

Updated Example

.footer-container {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
}
.footer-container .footerdiv {
  display: inline-block;
}