css如何使这个div位于另一个div的底部[重复]

Posted 2023-03-05

【中文标题】css如何使这个div位于另一个div的底部[重复]

【英文标题】：css how to make this div at the bottom of another div [duplicate]

【发布时间】：2014-07-21 01:12:20

【问题描述】：

这是一个小提琴

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;

但没有任何改变，请你帮忙

（请问为什么我的解决方案不起作用？）

【参考方案1】：

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

Demo

.bottom 
    position: absolute;
    bottom: 0px;

但是绝对定位的div不会扩大其容器的高度，如果高度太小会与其他内容重叠。

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

position: relative;
bottom: 0;

将从底部向上移动 0 [单位]。

【讨论】：

我不想使用绝对，因为你提到的缺点。没有其他解决方案吗？

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

如果你愿意，我可以将其设为静态。

@MarcoDinatsoli 如果高度是静态的，您可以在其容器底部添加匹配数量的填充（并添加box-sizing: border-box）。但是，如果高度不足以显示两个信息表，您仍然需要决定该怎么做。是否要滚动容器、减小字体大小或其他解决方案。

【参考方案2】：

DEMO HERE

您只需要添加 2 条规则。

.slNewClass 
    position: absolute;
    bottom:0 ; 


.mainTable 
    position: relative;

【参考方案3】：

DEMO

执行以下操作：

将.slNewClass div 设置为position: absolute; & bottom: 0px; 为了避免内容重叠绝对定位的 div 使 .mainTable div box-sizing: 到 border-box 然后添加像这样添加填充底部 padding-bottom: 130px;

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

【讨论】：

我不想使用像 -66 这样的静态值，因为没有指定表格的高度，所以现在可能有效，但在向表格添加其他元素时无效

@Marco Dinatsoli 这里是一个更灵活的替代解决方案。

【参考方案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/