SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member falp1004's Avatar
    Join Date
    Oct 2003
    Location
    London
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer outside vertical scrollbar

    Hi everybody,

    I'm new to the forum so please forgive me if this has been answered elsewhere.

    I've seen a couple of websites that have the footer section always at the bottom of the browser window, even if the page is longer and you have to scroll down. The footer is always there inmune to the scroll bar. Does anybody knows how this is achieved without frames, just css?


    Thanks in advance

    Frank
    Frank Lores-Penalver

  2. #2
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use 2 divs. both with width: 100%.
    the first one gets overflow: auto;

    example:

    <style>
    body { padding: 0px; margin: 0px; }
    #content { width: 100%; overflow: auto; height: 50px; background: #ff0; }
    #footer { width: 100%; height: 20px; background: #0ff; }
    </style>
    <div id="content">aasd<br />aasdf<br />afasd<br />afasd<br />afasd<br /></div>
    <div id="footer">asdfasdfease</div>

  3. #3
    SitePoint Member falp1004's Avatar
    Join Date
    Oct 2003
    Location
    London
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks, I will try this out.

    Quote Originally Posted by deluks
    use 2 divs. both with width: 100%.
    the first one gets overflow: auto;

    example:

    <style>
    body { padding: 0px; margin: 0px; }
    #content { width: 100%; overflow: auto; height: 50px; background: #ff0; }
    #footer { width: 100%; height: 20px; background: #0ff; }
    </style>
    <div id="content">aasd<br />aasdf<br />afasd<br />afasd<br />afasd<br /></div>
    <div id="footer">asdfasdfease</div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •