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%

Improve this question
9
  • 1
    Um, sounds good... was there a question? Commented Dec 16, 2008 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. Commented Dec 16, 2008 at 16:15
  • Give him some time to realize his mistake before closing it. Commented Dec 16, 2008 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. Commented Dec 16, 2008 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" Commented Dec 16, 2008 at 16:23

2 Answers 2

Reset to default
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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.