但是因为内部div是绝对定位的,所以你总是要担心外部div中的其他内容与它重叠(并且你总是必须设置固定的高度).

如果你能做到这一点,最好将内部div作为外部div中的最后一个DOM对象,并将其设置为"clear:both".

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

一种flexbox方式.

HTML:

  
Images, text, buttons oh my!
  
Bottom

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

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

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

  
Positioning with margin
  

    Content to the bottom
  

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