1 reply [Last post]
mkessler
mkessler's picture
Offline
Regular
Last seen: 11 years 14 weeks ago
Timezone: GMT-4
Joined: 2010-08-02
Posts: 12
Points: 18

I'm having difficulties creating a sticky footer that will not expand the size of the browser window OR keep its place. I've tried searching through this site and many others for answers, as well as have failed several attempts at following tutorials (CSS Sticky Footer included)... So, to get to the issues -

I'm able to create a sticky footer that will remain at the bottom of the page, however I cannot seem to overcome either of these 2 issues:

1. My sticky footer will remain at the bottom of the page and move as the content expands as intended, BUT creates unnecessary expanded vertical space on the page load (all content should fit within the browser without creating scroll bars when first opened).

or

2. My sticky footer will fit within the browser without creating scroll bars, BUT will disappear once a search is made.

To give you more of an idea, my site uses jquery to create an instant search, so once users begin to type within the search field the page expands as content is revealed. I feel like I'm so close to solving this issue, I just need a little guidance. IF anyone could point me in the right direction I would GREATLY appreciate it! Thanks for any help!

Also, for the first issue I tried setting all of my margins to 0, but that didn't solve the problem.

Issue 1 html:

Issue 2 html:

<body>
<div id="main"><style="margin-bottom:151px;">
    <div id="footer"></div>
     </div>  
</body>

CSS

#wrap{
    min-height: 100%;
} 
 
#footer {
   position: absolute;
   bottom: 0;
   margin-top: -100px;
   width: 100%;
   height: 100px;   
   background: #3e4041;
   border-top: 1px solid #e0e0e0;
   clear: both;
}

mkessler
mkessler's picture
Offline
Regular
Last seen: 11 years 14 weeks ago
Timezone: GMT-4
Joined: 2010-08-02
Posts: 12
Points: 18

nvm...

Issue resolved. Smile