自动调整两个块元素的大小

Question

我想完成以下任务。 （似乎不可能）

我们说我有一个固定高度和宽度的容器块。在该块中，还有另外两个块。 （橙色和蓝色块）

我希望橙色块根据蓝色块的高度调整其高度。蓝色块位于容器块底部的绝对位置。

我如何仅使用CSS？（并尽可能少地使用HTML）

---

显示我的问题的小提琴：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;
}

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

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

我 重新编辑 我的小提琴..很多..

Answer 2

好的......好吧，这里有一个关于如何实现这种行为的想法，尽管它有点回顾了基于表格的布局。使用此HTML：

<div class="container">
    <div class="orange">
        <!-- Content -->
    </div>
    <div class="blue">
        <div class="content">
            <!-- Content -->
        </div>
    </div>
</div>

这个CSS：

.container {
    width: 400px;
    height: 700px;
    display:table;
}
.orange {
    background:#AAA;
    height:100%;
    display:table-row;
}
.blue {
    background:#CCC;
    display:table-row;
}
.blue .content {
    max-height:500px;
    overflow:scroll;
}

我认为这会产生你所描述的效果。这是展示它的JSFiddle。尝试将内容添加到底部元素 - 如果使用某些Web开发人员工具检查元素，您将看到顶部元素实际上正在调整大小。

我还冒昧地对底部元素的内容应用了一个限制（并使用了overflow:scroll，因此使用额外的滚动条），尽管你可以删除它来改变处理过多内容的方式