Question

我已经退出HTML / CSS游戏一段时间了，看起来我有点生疏了。我正在寻找一个简单的两列布局（对于我的页面的一部分，下面会有更多）。 A列将具有固定的宽度，其高度将由其内容确定（可能具有最大高度，然后滚动）。我真正得到的问题是让B列的高度与A列相匹配。此外，此列将展开以填充视图区域宽度的其余部分。有什么想法吗？

+-------------+------------------------------------+
|  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/

Answer 2

Html代码

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear" />
</div>

CSS

.container
{
    width:100%;
}
.left
{
    float:left;
    width:200px;
    background-color: blue;

}
.right
{
    background-color: green;
    margin-left:200px;
}
.clear
{
    clear:both;
}

要在行动中查看http://jsfiddle.net/BTaMx/

Answer 3

CSS 3方式是使用display: box

HTML：

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS：

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    width: 100%;
}

.left {
    width: 100px;
}

.right {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

请参阅http://jsfiddle.net/AEY7p/了解演示

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

3 个答案: