CODEWITHSUNDEEP
htmlcsswordpress
nCore
nCore

Reputation: 2097

Sticky footer overlaps the main content "WordPress Template"

I know there are solutions about sticky footer but I tried them all. What I intend to do is to stick the footer at the bottom of the page whether content is short or long without using position:fixed and fix footer height.

the footer does sticks at the bottom when there's not much content on the footer but when there's contents like the sample below it overlaps the main content.

See the page here: Click to see the page

enter image description here

footer {
position:absolute;
bottom:0;
width:100%;
background:#333;
padding:10px 0; /*paddingtop+bottom 20*/
}

.wrapper{
   min-height:100%;
   position:relative;
}

#main{
   padding:10px;
   padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
   height:100%;
}

Okay now it doesn't over lap the content but I have a big gap in between the content and footer when the content is short or empty. How can I get rid of the scroll bar when the content is short and vice versa.

enter image description here

Upvotes: 0

Views: 2488

Answers (3)

calvin
calvin

Reputation: 479

Your footer's height is much greater than 25px, but your #main's bottom padding is only 20px (footer's total vertical padding) + 25px. The actual computed height according to my inspection is 245px. So try this:

padding-bottom: 265px; /* 245px (footer height) + 20px (footer total vert padding) */

Upvotes: 0

newTag
newTag

Reputation: 2169

From my example: overflow: auto should be assigned to .module-content and it should have a bottom-padding with the height of footer.

#mycontent .module-content {
    float: left;
    width: 700px;
    overflow: auto;
    padding-bottom: 70px;
}
#footer {
    color: red;
    background: black;
    opacity: 0.6;
    height: 70px;
    margin-top: -70px;
    width: 100%;
    clear: both;
}

See demo

Upvotes: 0

Howli
Howli

Reputation: 12469

Removing the position: absolute; and bottom: 0; and adding instead margin-top: -120px; should fix your problem. The css will be:

footer {
    width: 100%;
    background: #333;
    margin-top: -120px;
    padding: 10px 0;
}

Upvotes: 1

Related Questions