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: 244

Filed under:
|

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

Related posts about css

Related posts about html