CSS/HTML question.

I'm trying to design a page which will have a header and footer that go across the entire screen (meaning the width will be determined by the size of the browser's window). I have looked through different websites, and couldn't find the correct way to do it (maybe I just don't know the correct name for it). So far I was only able to find a way how to make a fixed header and footer, where once you scroll up or down, they remain on the screen, while the content scrolls under it. What I would like to have is the header and footer scroll up or down when there's a long page. I also want the footer to be stuck to the bottom of the page.

This is the example that I found for fixed version: http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/ Notice how the footer is always stuck at the bottom. I want the header to scroll up when there's a lot of content on the page, and same for footer, but footer should remain stuck to the bottom of the page when it has finished scrolling. I noticed that a lot of Wordpress themes have this too.

Does anyone know where I could find a fairly simple tutorial that outlines the steps or provides the code for this?

 

Ok, I think I found what I was looking for. The thing is called a "sticky footer", where the footer sticks to the bottom of the page. Here are two examples: http://www.cssstickyfooter.com/ and http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ with code provided. Now I just need to figure out which would work better for my overall site design. I'll also need to find a similar technique for a header.