1

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%

P.S.
  • 15,970
  • 14
  • 62
  • 86
Gribbler
  • 414
  • 1
  • 6
  • 21
  • 1
    Um, sounds good... was there a question? – Greg Hurlman Dec 16 '08 at 16:13
  • Edit your post and ask a question. This is not a "do this all for me now" site. We can help with your problems, but you have to tell us what you need help with. – Oli Dec 16 '08 at 16:15
  • Give him some time to realize his mistake before closing it. – Greg Hurlman Dec 16 '08 at 16:15
  • It's editable while closed.. I don't see any benefit from this being an open question... Especially while it's not a question. – Oli Dec 16 '08 at 16:18
  • oh c'mon, guys... there's a very easy "psychic answer" to this non-question. Refusing to answer is just being pedantic. Consider me telling my sister "I didn't bring my watch"... the correct answer is "it's 9:30" – Jimmy Dec 16 '08 at 16:23
  • So the "psychic answer" is "learn CSS"? – Oli Dec 16 '08 at 16:27
  • I'd request the poster to at least try it in CSS; otherwise close the question until he does. – George Stocker Dec 16 '08 at 16:30
  • @Oli: yes, in the same way we answer all beginner questions with "learn to program kthx come back later" – Jimmy Dec 16 '08 at 16:31
  • Come on guys - it would seem to me that "try it in CSS" is a shortsighted comment given that what the original OP is obviously trying to achieve cannot be done with CSS directly. The last but one para could obviously be interpreted as a question. Give the guy a break. – BenAlabaster Dec 16 '08 at 16:39

2 Answers2

2

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,

How do I get a floating footer to stick to the bottom of the viewport in IE 6?

Community
  • 1
  • 1
Jimmy
  • 89,068
  • 17
  • 119
  • 137
2

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

BenAlabaster
  • 39,070
  • 21
  • 110
  • 151