CSS Flexible Height with scrollable content
        Posted  
        
            by th3hamburgler
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by th3hamburgler
        
        
        
        Published on 2010-04-30T11:23:02Z
        Indexed on 
            2010/04/30
            11:27 UTC
        
        
        Read the original article
        Hit count: 296
        
I'm looking to create a flexible width/height page layout with no window scrollbars!
Any content that will not fit on the page should be scrollable independently with the overflow property.
I've seen plenty of ways to construct flexible width layouts using just HTML and CSS.
The following site does a pretty good job on that front: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I wish to implement scrollable content within the 3 centre columns. The content should be scrollable not the column div.
e.g.
<div class="column">
<h4>Title</h4>
<ul>
    <li>These</li>
    <li>Items</li>
    <li>Should</li>
    <li>Be</li>
    <li>Scrollable</li>
    <li>If</li>
    <li>They</li>
    <li>Exceed</li>
    <li>The</li>
    <li>Window</li>
    <li>Height</li>
</ul>
So far if the list exceeds the window height it pushes the footer off page.
I'm not to bothered about it working on old versions of IE, although that would score bonus points!
© Stack Overflow or respective owner