html - 自动调整两个 block 元素的大小

Question

我想完成以下任务。 (这似乎是不可能的)

假设我有一个具有固定高度和宽度的容器 block 。在那个街区内，还有另外两个街区。 (橙色和蓝色 block )

我希望橙色 block 根据蓝色 block 的高度调整其高度。蓝色 block 绝对定位在容器 block 的底部。

我如何仅使用 CSS 来做到这一点？(并尽可能少地使用 HTML)

---

显示我的问题的 fiddle :http://jsfiddle.net/uK64u/2/

---

根据要求，许多尝试之一:

HTML:

<div id="container">
    <div id="orange"></div>
    <div id="blue">Lorem ipsum dolor sit amet.</div>
</div>

CSS:

#container
{
    width: 400px;
    height: 700px;
}

#orange
{
    position: absolute;
    height: 100%;
}

#blue
{
    position: absolute;
    height: auto;
    bottom: 0;
}

这失败了，因为蓝色 block 与橙色 block 重叠，而不是调整其高度。

Answer 1

您可以通过为橙色指定 position:relative 并为蓝色背景中的文本指定 position:absolute 来实现此目的。查看FIDDLE

HTML

<div class="box-outer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
</div>

CSS

.box-outer {
    border:1px solid #222;
    background-color:orange;
    width:200px;
    height:300px;
    position: relative;
 }
 p {
    background-color:blue;
    padding:10px;
    margin-bottom:0px;
    vertical-align:baseline;
    position: absolute;
    bottom: 0;
    left: 0;
  }

我重新编辑我的 fiddle ..lol..