Quote:
Originally Posted by darren132
Yes, but the entire page needs to be 100% to the browser height. This means a scrollbar needs to appear in the content area if the content in that area is bigger than the window.
Here's the actual layout that I'm looking for that's currently in tables, but I would like to convert to CSS: http://www.peoplelance.com/pictures/css_layout.png
The header, footer, red & blue bar have a fixed height in pixels. The issue however is that the content area where you see the yahoo website with the scrollbar must expand between the header and footer no matter what size of browser you are using and therefore, it can't have a fixed height. It needs to expand from top to bottom even if there's hardly any content in it. The red and blue bar are collapsable and are not always shown. The gray side bar is also collapsable. So what I need is CSS code that can make the content area (yahoo website) dynamic so that it can expand between the divs both in height and width.
Hopefully that explains things a little better. |
CSS is not a programming language. It is only a programming style sheet.
It is not capable of the complex logic you are trying to perform.
It will need some help from a programming language, to switch from one CSS to another. And to perform other functions.
Javascript would be best suited for your purposes.
The problems you will be facing is when you use fixed heights in the header and footer elements. And then you add and subtract them at will.
CSS alone can not compensate for these changes.
As you have already figured out is that you can't use 100% height on everything. The page soon gets larger than the window.
And even if you used percentages on all element heights,
you still have the problem of adding and removing header elements.
With Javascript, you can find everything about the browser window,
and it can perform the complex logic needed to manipulate your page.