CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3027531
user3027531

Reputation: 282

Sticky footer without page wrap

Following is the fiddle which works fine if the content above the footer is wrapped in page-wrap and on less content the footer sticks to bottom else there will be the scroll. Is there a way to make this fiddle in a way so it should not depend on page-wrap and I only have to apply the css on the footer only. I am requesting this because there are over 50 pages made in this way and by adding ss to only footer. I only have to change the header file for the footer.

http://codepen.io/chriscoyier/pen/uwJjr

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 142px; 
}

Upvotes: 0

Views: 77

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

EDITED:

http://jsfiddle.net/bWTwL/1178/

add this code to your jquery:

$('.page-wrap').css('min-height',($(window).height()-142)+'px');

and this is your CSS:

/* Mostly: http://ryanfait.com/sticky-footer/ */

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  /* equal to footer height */
    height:auto;
}
.site-footer {
    background: orange;
    height:142px;
    display:block;

}

without .page-wrap:after

Upvotes: 1

Related Questions