CSS Flexible Height with scrollable content

Question

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>Column</li>
        <li>Height</li>
    </ul>
</div>

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!

Answer 1

You mean like this?

JSFiddle scrollable li.

Not sure if you can effectively hide the scrollbar just with CSS and HTML.