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