在页面底部将多个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

- Amit Kumar

Answer 1

不要把每个元素都定位在底部，而是将这些元素放在一个容器中，然后设置父元素的 position 为 fixed 并将其定位在底部。

这样做可以让 .footerdiv 元素仍处于正常流中，并且它们可以并排定位。 更新示例

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

- Josh Crozier

Answer 2

你实际上使用了4个具有相同DIV ID的div。

这是你需要做的事情-

<div class="footerdiv">
    <div>Footer - scroll 1</div>
    <div>Footer - scroll2</div>
    <div>Footer - scroll 3</div>
    <div>Footer - scroll4</div>
</div>

并将CSS设置为100％，让它占据页面的水平空间-

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

请查看在JS Fiddle上的演示。

希望能对您有所帮助 :) 祝编程愉快！

- bozzmob

---

OP在页脚div上从未有过相同的id，但他确实有相同的class，这是允许的。 - Asons

Answer 3

为每个 div 设置一个 id，并通过该方式引用每个 div。

<div class="footerdiv" id = "d1">Footer - scroll 1</div>
<div class="footerdiv" id = "d2">Footer - scroll2</div>
<div class="footerdiv" id = "d3">Footer - scroll 3</div>
<div class="footerdiv" id = "d4">Footer - scroll4</div>

那么你可以说：

.footerdiv {
    position: fixed;
    bottom: 0;
}
#d1 {
    left: 100px;
}
#d2 {
    left: 200px;
}
#d3 {
    left: 300px;
}

- clamchowder314

Answer 4

要不试试用表格？你可以为每个元素创建一个新的列。

<table class="footerdiv">
  <tr>
    <td>Footer - scroll 1</td>
    <td>Footer - scroll 2</td>
    <td>Footer - scroll 3</td>
    <td>Footer - scroll 4</td>
  </tr>
</table>

- ManStudent

Answer 5

您可以像这样将它们包装在页脚中。这是固定版本： https://jsfiddle.net/4dq215h4/2/

并将CSS更改为：

.footerdiv {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 20px;
font-family: sans-serif;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B;
display:inline-block;
float:left;
width:100px;
}
footer{
  position:fixed;
  bottom:10px;
}

- Dmitry Yudin