I am working on a three-column layout where the third column contains two div elements. The first div is fixed, while the second div has a minimum height of 50px. I want this second div to expand in height as its content grows, reaching the bottom of the third column before displaying scrollbars.
Check out my progress so far at: http://jsfiddle.net/Q2Ata/1/
I have encountered an issue with the layout when adding more text to the second div, causing the height of the main table to also increase. You can see this problem in action here: http://jsfiddle.net/Q2Ata/2/
HTML code:
<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 Code:
.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}