We are creating a web page with header, content and footer. The header and footer should be visible at all time and the content should be scrollable. The container div has a fixed width but no fixed height. I solved the problem of keeping the footer at the end by using css sticky footer (http://ryanfait.com/sticky-footer/) The content area is divided into two parts (content1 and content2) and has a flexible scrollable div.
The problem is, the height of the content area is not absolutely defined (i.e. 100%). We would like that when the data in either content1 or content2 exceeds the screen size that it automatically overflows into its own independent scrollable bar and the header and footer remain visible.
Any help would be highly appreciated.
Hey Choesang, redsquare, here is another way you can do it without putting anything off the screen.
First find the height of the viewport that you have to work with, we'll call this 'viewportHeight'. If the content of your header and footer are already set, they will have a height. Calculate their heights and add them together, we will call this 'usedHeight'. The height you have left in which to put the contents is: remainingHeight = viewportHeight - usedHeight;
If you set the css property on your content container to be height=remainingHeight and overflow-y = auto, your content will always take up at least the minimum content height, and if there is too much content it will force a scroll bar to appear.
We are going to use the Prototype library to help us, but we could just as easily use jQuery or even write the code to calculate the heights ourselves.
Notice in the body I am setting the height to 100%, as well as the padding to 0, and the margin to 0. Most browsers put a 10px padding around the body and this will cause your footer to show up off the screen in the process I am showing.
Before you show the content you could append it to a div that is positioned off screen. Then take the height of the content and work out depending on the size of the clients viewport if it needs to be scrollable. Then take the content out of the off screen div and append to your main div with the height specified for the viewport and overflow:auto.