当容器和​​内容高度都不知道时，如何将内容刷新到容器的底部？

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＆gt; = 9以及其他浏览器的某些现代版本兼容。

Answer 1

<强>更新

.container {
  border: 1px solid green;
  position: relative;
  min-height: 120px;
}

.content {
  background-color: red;
  position: absolute;
  width: 100%;
  bottom: 0;
}

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

Answer 2

这应该有效：

.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;
}

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

Answer 3

我自己找到了解决方案，诀窍是使用display: flex;。以下是解决方案：http://liveweave.com/aMpV8V。

<强> 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 {
  display: flex;
  flex-direction: column-reverse;

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

.content {
  width:  100%;
  background-color: red;
}

根据caniuse.com，这个几乎符合我的要求：缺少IE 9支持，但其他人都支持它。