如何使用CSS将一个div放置在另一个div底部？

Question

这是一个JFiddle

http://jsfiddle.net/79prY/

这是结果:

我希望圆圈内的div在紫色div的底部。

圆圈内的div是这个div：

<div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>

我尝试过这样做。

position:relative;
    bottom:0px;

但是什么都没有改变，你能帮忙吗？

（同时请问为什么我的解决方案没有起作用？）

- Marco Dinatsoli

Answer 1

演示

请执行以下操作：

• 将 .slNewClass div 设置为 position: absolute; & bottom: 0px;
• 为了避免内容重叠在绝对定位的 div 上，将 .mainTable div 的 box-sizing: 设置为 border-box，然后添加底部填充，如下所示：padding-bottom: 130px;

注意： 底部填充应与底部 div 的高度相同 + 一些额外像素的间隙。

- Imran Bughio

---

我不想使用静态值，比如-66，因为表格的高度没有指定，所以现在可能可以工作，但是当添加其他元素到表格时就不能工作了。 - Marco Dinatsoli

@Marco Dinatsoli，这里有一个更灵活的替代方案。 - Imran Bughio

Answer 2

您可以在其容器上使用 position: absolute; bottom: 0px; 和 position: relative;。

演示

.bottom {
    position: absolute;
    bottom: 0px;
}

然而，绝对定位的 div 不会扩展其容器的高度，并且如果高度太小，则会重叠其他内容。

使用相对定位将其从原始位置移动 x [单位]。设置

position: relative;
bottom: 0;

将其向上移动0个[unit]，距离底部。

- Mathias

---

我不想使用绝对路径，因为你提到的缺点。难道没有其他解决方案吗？ - Marco Dinatsoli

@MarcoDinatsoli 服务级别 div 中的内容高度是静态的吗？ - Mathias

如果您想要的话，我可以将其设为静态的。 - Marco Dinatsoli

@MarcoDinatsoli 如果高度是固定的，您可以在其容器底部添加相同数量的填充（并添加 box-sizing: border-box）。但是，如果高度不足以显示信息表格，您仍然需要决定要做什么。您想滚动容器、减小字体大小或采用其他解决方案吗？ - Mathias

Answer 3

这里演示

你只需要添加2个规则。

.slNewClass {
    position: absolute;
    bottom:0 ; 
}

.mainTable {
    position: relative;
}

- shyammakwana.me

Answer 4

试试这个：

首先更改表格的样式：

.informationTableClass {
  height: 100%; /* 60% to 100%*/
  width: 100%;
}

将div移动到表格中并进行如下更改：

<tr><td colspan="2" style="height:100%"></td></tr>
<tr>
  <td colspan="2">
    <div class="slNewClass">
      <div class="details">
        <span class="content">Service Level</span>
        <span class="value" id="slSpan" runat="server">0%</span>
      </div>
    </div>
  </td>
</tr>

http://jsfiddle.net/XaE75/

- yusefnejad