header and footer that always appear at top and complete bottom

Question

I know I can just use a master page, but what markup do I use on the master page to always have a header at the top and a footer all the way at the bottom using some CSS code?

Answer 1

For the footer:

It's called a Sticky Footer. You can google it and find some (google css sticky footer). I like this one.

Answer 2

Use position: fixed

So a header might be:

.header {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100px;
}

And a footer:

.footer {
     position: fixed;
     bottom: 0px;
     left: 0px;
     width: 100%;
     height: 50px;
}

That would be a 100px high header and a 50px high footer at the bottom. Note that position: fixed does not work in IE6 by default

Answer 3

Although I am not perfectly sure, what your context is, in general you can do this by setting display:fixed for your footer and header id/class and using bottom:0 for the footer and top:0 for the header.

You probably want to include a high z-index for both so they are always displayed at the upper-most layer.

The problem with this solution is that the actual content of the page scrolls behind both items, and may be unreadable, so you have to tweak the top and bottom margin for both.

This is a quick and dirty information to get you started, as you did not provide more details in your question.