html布局问题:如何实现此布局？

Question

我有三列布局。在第三列中，我有两个div。第一个div是固定的。第二个div的最小高度为50 of。当第二个div中的文本内容增加时，它的高度应该增加到第三列底部，然后显示滚动条。

到目前为止，我已经在这里应用了我的努力：http://jsfiddle.net/Q2Ata/1/

我试图实现这个布局，但是当我在里面添加更多的文本时，主表的高度也会增加。这个问题可以从这把小提琴上找到。http://jsfiddle.net/Q2Ata/2/

HTML代码：

<div class="table">
    <div class="table-cell">
        <div class="column">Column 1</div>
    </div>
    <div class="table-cell">
        <div class="column">Column 2</div>
    </div>
    <div class="table-cell">
        <div class="column">
            <div class="container">
                <div class="header">
                    <div class="table-cell">Header</div>
                </div>
                <div class="content">
                    <div class="abc">
                        text content here ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码：

.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}

Answer 1

您需要在元素上设置一个max-height，以便使overflow: auto工作，并且在达到最大高度时将有滚动条。

http://jsfiddle.net/Q2Ata/4/