Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

definitive

macrumors 68020
Original poster
Aug 4, 2008
2,088
1,021
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?
 
Having an element fill the whole width is simply a matter of setting the width to 100%. You'll also need to make sure the body tag has zero margins and padding so it's flush to the edge.

I'm not sure I follow the rest of the post. The footer will naturally sit at the end of a page and scroll with the page. I'm sure I'm missing something though.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.