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

Question

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>

Answer 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”。

Answer 2

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

Answer 3

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 Guide

对flexbox的浏览器支持 - Caniuse

Answer 4

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

Answer 5

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

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

<强>解决方案： 鉴于我当时有多累，甚至想到这样的方法似乎很正常但是我知道我有一个父级DOM元素，这个条形的高度是从它开始的。

我没有进一步使用javascript，而是使用了一个（一直不错的想法）CSS答案！ ：）

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

是的，这是正确的，而不是定位DOM，我在css中将其父级颠倒了。

对于我的方案，它会起作用！可能也适合其他人！没有火焰！ :)

Answer 6

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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

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