css - 当容器和​​内容高度都未知时，如何将内容刷新到容器底部？

Question

我有这种情况:http://liveweave.com/roBPrb .这是来源:

HTML:

<div class="container">
  <div class="content">
    This should be always at<br/>
    the bottom, the container<br/>
    should grow with the texts size.
  </div>
</div>

CSS(忽略颜色):

.container {
  min-height: 200px;
  border: 1px solid green;
}

.content {
  background-color: red;
}

我想要两件事:

• 容器应随着内容的增加而增大。
• 内容应始终位于容器底部。

我该怎么做？它应该与 IE >= 9 和其他浏览器的现代版本兼容。

Answer 1

这应该有效:

.container {
  max-height:100%;
  min-height: 200px;
  height:auto;
  border: 1px solid green;
  position: relative;
}

.content {
  background-color: red;
  position: absolute;
  bottom:  0;
  left: 0;
}

请注意，父容器必须具有相对位置才能使子容器的绝对定位起作用。我希望你找到了你要找的东西。