Search code examples
cssdhtml

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


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%


Solution

  • 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?