将 div 的顶部固定到父 div 的底部答案

【问题标题】：Fixed Position the top of a Div to the Bottom of Parent div将 div 的顶部固定到父 div 的底部
【发布时间】：2011-10-14 05:32:08
【问题描述】：

在定位 div 方面，我有一个有趣的问题。

我正在使用相对绝对定位将子 div b 定位在父 div a 内。我知道如何定位它们，使其底部边缘对齐，使用底部：0px，但我需要它们定位，使 B 的顶部与 A 的底部对齐，如下图所示。

鉴于我无法确定 B 的高度，是否有任何方法可以在 CSS 中执行此操作。我当前的 CSS 在下方。

目标 -

HTML -

<div id="a">
     <div id="b"> </div>
</div>

CSS -

#a{
   position: relative;
}

#b{
   position: absolute;
   bottom:0px;
}

【问题讨论】：

你说你不知道b的高度。你知道a的高度吗？
您可以使用边距来做到这一点，但是，如果您想将它们彼此对齐，为什么首先将 b 放在 a 内？两者周围的父容器 c 不是更适合这项任务吗？
“但我需要它们定位，以便 B 的顶部与 B 的底部对齐” - 你的意思是：“...... B 的顶部与 A 的底部对齐”。
对不起，我应该澄清一些事情。 html 是由 Wordpress 的自定义帖子列表插件生成的，因此我无法很好地控制 htmls 结构。
是的，从 B 的顶部到 A 的底部。已修复。

标签： html css position css-position

【解决方案1】：

如果你不知道高度，

你必须这样写代码：

CSS：

#a {
   position: relative;
   background: black;
   color: #fff;      
}

#b {
   position: relative;
   background: blue;
   color: #fff; 
}

HTML：

<div id="a">
    // Your code inside a
</div>
<div id="b">
    // your code inside b
</div>

查看演示：http://jsfiddle.net/rathoreahsan/cKsVK/

【讨论】：

在问题中我指定我不知道B的高度。实际上我也不能确定A的高度。
是的，我知道，我在回答中提到b 取决于a 的高度。如果没有指定高度，我们无法在主 div 中重新定位 div。
如果您不知道高度，那么您必须将 div b 放在 div a 之外以实现您的目标。
那么你为什么要提供这个答案，如果你知道它不起作用？

【解决方案2】：

我想你在关注top: 100%: http://jsfiddle.net/ysafx/

#a {
    position: relative;
    outline: 1px solid red
}

#b {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    outline: 1px solid blue
}

【讨论】：

宾果游戏。我在一秒钟前想出的另一种解决方案是margin-top：100%；顶部：0px;