CSS/HTML question.

Discussion in 'Web Design and Development' started by definitive, Jan 26, 2010.

  1. definitive macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #1
    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?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #3

Share This Page