HTML:两列层，一列具有自动高度，另一列具有自动宽度

Question

我已经离开 HTML/CSS 游戏有一段时间了，看起来我有点生疏了。我正在寻找一个简单的两列布局(对于我页面的一部分，下面会有更多)。 A 列将有一个固定的宽度，它的高度将由它的内容决定(可能有一个最大高度，然后滚动)。真正困扰我的问题是让 B 列的高度与 A 列匹配。此外，该列将扩展以填充 View 区域的剩余宽度。有什么想法吗？

+-------------+------------------------------------+
|  Column A   |              Column B              |
|             |                                    |
| Fixed Width |   Expands L to R to fill window    |
|             |                                    |
| Height auto |   Height inherited from column A   |
| to fit the  |                                    |
| content of  |                                    |
| column      |                                    |
+-------------+------------------------------------+

Answer 1

HTML:

<div class="container">
    <div class="aside">
        <p>Column A</p>
        <p>Column A</p>
        <p>Column A</p>
        <p>Column A</p>
        <p>Column A</p>
    </div>
    <div class="main">
        <p>Column B</p>
    </div>
</div>

CSS:

.container {
  overflow: hidden;
}
.aside {
  float: left;
  overflow-y:auto;
  width: 100px;
  max-height: 200px;
  background: #ddd;
}
.main {
  overflow: hidden;
  padding-bottom: 99999px;
  margin-bottom: -99999px;
  background: #ccc;
}

演示: http://jsfiddle.net/akai/NHghW/