Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS, content expand, sticky footer

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #152357
    jwoodhams
    Participant

    Can anyone help me understand why this isn’t working? I have a page that when I set the footer position to absolute and anchor it to the bottom, the div content above it, will not move the footer down.

    HTML Code:

        <div></div>
        <div>
    
        </div>
      <div></div>
    

    CSS: form { height:100%; } .header { position: relative; margin: 0px; padding: 0px; width: 820px; height:115px; margin-right:auto; margin-left:auto; } .page { position:relative; height:auto; width: 800px; margin: 0px auto 0px auto; padding-bottom:146px; border:0px solid blue; } .footer { clear:both; position:absolute; bottom:0px; height:146px; width:100%; padding: 0px; margin: 0px auto; background-image:url(../Images/FooterBG.jpg); }

    On pages with little content, the footer appears at the bottom as it should. However, on pages with a lot of content, the expanding content does push the footer down below the browser viewport. Anyone have any thoughts?

    #152362
    Paulie_D
    Moderator

    Isn’t that what you wanted when you positioned it like that?

    If not, you might want to look into Fixed position.

    #152462
    jwoodhams
    Participant

    Thanks so much. Strangely enough, after a reboot on my development PC, the exact same code is now working. Strange thought the behavior prior to the reboot was the same on IE, FF, and Safari. Could this have been something to do with Visual Studio?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.