如何将内部 <div> 发送到其父 <div> 的底部？答案

【问题标题】：How can I send an inner <div> to the bottom of its parent <div>?如何将内部 <div> 发送到其父 <div> 的底部？
【发布时间】：2011-01-09 23:27:33
【问题描述】：

另一个div里面的div图片和代码如下。因为会有父div的文字和图片。而红色 div 将是父 div 的最后一个元素。

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

【问题讨论】：

那么，父 div 中的代码是否在逻辑上放置在子 div 之上？图片和文字是动态添加的吗？具体问题是什么？

标签： css html

【解决方案1】：

这是一种方式

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

但是因为内部 div 是绝对定位的，所以您总是需要担心外部 div 中的其他内容会与它重叠（并且您总是必须设置固定高度）。

如果可以，最好将内部 div 设置为外部 div 中的最后一个 DOM 对象，并将其设置为“clear: both”。

【讨论】：

感谢您的解释和 IE Hack（如果我没记错的话，您添加了 **width: 100% for IE Hack）。
不，宽度：100% 在您的原始文件中 - 我没有添加。
我尝试将我更改的部分加粗，但 Markdown 不适用于代码块内：-P
:) 实际上我无法理解我们是如何用符号入侵 IE 的，这就是为什么我认为它是 IE 入侵 :)
请记住，如果父容器是浮动的，这种方法是行不通的。

【解决方案2】：

一种弹性盒方式。

HTML：

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

编辑：

来源 - Flexbox Guide

浏览器支持 flexbox - Caniuse

【讨论】：

天啊，我的[编程]生活你都去哪儿了！ ;) 我喜欢它如此简单且不会影响定位，而且它似乎适用于所有浏览器：caniuse.com/#feat=flexbox。这应该是现代编程的解决方案和公认的答案。
Flexbox 现在通常是“简单的方法”，并且（几乎）有很好的浏览器支持和文档。将 caniuse 链接添加到答案中。

【解决方案3】：

制作外部 div position="relative" 和内部 div position="absolute" 并将其设置为 bottom="0"。

【讨论】：

是的，这可行，但绝对定位打破了“自然布局”。内部 div 的高度不会作为父级的高度包含在内，并且随着外部 div 变窄，您可能会看到与外部 div 中的其他内容重叠。

【解决方案4】：

这是另一个纯 CSS 技巧，它不会影响元素流。

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

【讨论】：

如果不想在父 div 上设置高度，那就太棒了！谢谢！
这对我来说是最好的答案
太棒了！另一个 flex 解决方案将我所有的内容移到了位置，这个解决方案将您想要放在底部的对象与其他对象隔离开来。很好的解决方案！
太棒了！我将它与#parent :last-child 结合起来以实现更好的自动化（而不是.child）。这避免了必须给孩子一个类名或 ID，并且 CSS 将总是应用于最后一个孩子。

【解决方案5】：

您可能不需要绝对定位，因为它会破坏回流：在某些情况下，更好的解决方案是使祖父元素display:table; 和父元素display:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给子元素display:inline-block;，它们将自动流向父元素的底部。

【讨论】：

【解决方案6】：

注意：这绝不是最好的方法！

情况：我不得不做同样的事情，只是我无法添加任何额外的 div，因此我被我所拥有的东西所困扰，而不是删除 innerHTML 并通过 javascript 创建另一个几乎就像 2 个渲染我需要将内容放在底部（动画条）。

解决方案： 考虑到我当时有多累，想到这样的方法似乎很正常，但我知道我有一个父 DOM 元素，栏的高度是从它开始的。

我没有进一步弄乱javascript，而是使用了（不总是好的想法）CSS答案！ :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

是的，没错，我没有定位 DOM，而是在 css 中将其父级倒置。

对于我的场景，它会起作用！可能对其他人也是如此！没有火焰！ :)

【讨论】：

这可能不是最好的方法，但这是非常棒的，非常有创意的方法。我自己今天一直在努力解决这个问题，我的主要症结在于：没有设定高度，必须完全流畅（没有足够的字符来解释为什么 display: table 不起作用）。这很好地处理了一切；发生这种情况时，div 内的图像也会翻转，所以我只是使用这些元素上的类将它们翻转回来。看起来完全一样，没有设定高度。有点hacky，但是嘿，有时没有更好的选择。干得好！

【解决方案7】：

如果您知道父母的身高，以下是避免绝对 div 和表格的方法：

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS：

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle：

Example

【讨论】：

【解决方案8】：

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>

【讨论】：