How to create an HTML CSS Page with Header, Footer and Content

Question

There are 3 parts to the page.

1. Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height : 100% does this)

2. Content, the content should fill the page below the bottom of the header to the top of the footer. if there is more text in the content that can be shown, then scroll bars should be available.

3. Footer. Footer should be 25px high and always sit at the bottom of the viewport.

The window is a popup and it should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.

The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.

The widths would all be 100%

Answer 1

I'm afraid I don't understand the question.. probably because you didn't ask one? Are you asking for advice on how to do this?

Alex

Answer 2

Yes I am asking how I would do this.

Answer 3

Header: don't specify a height. Divs will automatically size to their content's height

Content: specify a margin-bottom: 25px to avoid being overlapped by the footer

Footer: position: fixed; height:25px

You'll have to look into ways to simulate position:fixed for IE < 7. see, for example,

http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie-6

Answer 4

would this still give me scrollbars in the content div? I dont want the window to be scrollable, just the content div.

Answer 5

This can be a pain in the butt if you want the footer at the bottom of the window. The only way I've found to do this and make it work cross-browser is by using a dreaded table layout - and before I get my head bitten off, table layouts are frowned upon - big time.

It's easy to position the header and the content...but as far as I'm aware, not the footer so far, I've only found 2 ways of positioning the footer at the bottom of the window (as opposed to the bottom of the document which may be half way up the window for short documents), 1 uses Javascript to reference the Window.Height and the other uses tables (the frowned upon, but simple way of doing this).

Up to this point, I've yet to see a CSS that reliably does this in all browsers. I would be very interested to see a CSS that does this...

Answer 6

This thread is hilarious. Should this be a comment? lol