Is this possible with just CSS?I'm trying to section up the screen into two spaces:[*]A div on the left that is always the same height as the screen that stretches its width to its contents and handles height overflow with a scroll bar.[*]A div that occupies the remaining screen width, that wraps its contents, and whose height is at least as tall as the screen height regardless of content.Here's some sample code that I tried with my best attempt (fiddle):HTML:\[code\]<body> <div id="items"> <table> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> <tr> <td>stuff stss fsfs sfafa sfsfa fsfafafa</td> </tr> </table> </div> <div id="container">This should expand rest of page width.</div></body>\[/code\]CSS:\[code\]body { margin: 0; padding: 0; position: absolute; height: 100%;}#items { height: 100%; overflow-y: scroll; border: solid 1px red; float: left;}#container { min-height: 100%; border: solid 1px blue; float: left;}\[/code\]This is very close, but it fails since the second div (blue border) fails to expand the whole remaining screen width. I do not want to set % widths or give a fixed width to either, as I want the first div to expand its width based on its contents.
Scrollable Window Height Div, with second Div occupying rest of screen space
- Thread starter hoaim0ng
- Start date