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

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小提琴上的工作demo 。

希望它有所帮助:)快乐的编码！

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

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>

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

将多个div元素设置为＆＃34; position：fixed＆＃34;在页面底部

5 个答案: