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

下面的另一个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 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”。

一种flexbox方式。

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指南

浏览器对flexbox的支持-Caniuse

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

这是另一个纯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>

您可能不希望使用绝对定位，因为它会中断重排：在某些情况下，更好的解决方案是制作grandparent元素display:table;和parent元素display:table-cell;vertical-align:bottom;。完成此操作后，您应该能够为子元素提供元素display:inline-block;，它们将自动流向父元素的底部。

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

情况：我只能做同样的事情，因为我无法添加任何额外的div，因此我坚持使用我拥有的东西，而不是删除innerHTML并通过javascript创建另一个，就像2个渲染器一样，我需要在底部（动画条）。

解决方案： 考虑到我当时很累，甚至想到这种方法似乎很正常，但是我知道我有一个父DOM元素，该条的高度是从此开始的。

而不是进一步搞乱JavaScript，我使用了（并非总是很好的想法）CSS答案！:)

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

是的，这是正确的，我没有将DOM定位，而是将其父代在CSS中颠倒了。

对于我的情况，它将起作用！可能也是别人的！没有火焰！:)

如果您知道父母的身高，这是避免绝对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：

例

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