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

Question

div里面的另一个div图片和代码如下.因为会有父div的文本和图像.而red 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指南

浏览器支持flexbox - Caniuse

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

Answer 5

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

Answer 6

注意:这绝不是最好的方法!

情况:我不得不做同样的thign只有我无法添加任何额外的div,因此我坚持我所拥有的而不是删除innerHTML和创建另一个通过javascript几乎像2渲染我需要有内容在底部(动画栏).

解决方案: 考虑到我当时有多累,即使想到这样一种方法似乎也很正常,但我知道我有一个父级DOM元素,这个条形高度就是从它开始的.

而不是搞乱javascript任何进一步我使用(不总是很好的想法)CSS答案!:)

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

是的,这是正确的,而不是定位DOM,我把它的父母颠倒在CSS.

对于我的场景,它会工作!可能也适合其他人!没有火焰!:)