繁体   English   中英

没有页面换行的粘页脚

[英]Sticky footer without page wrap

以下是小提琴,如果将页脚上方的内容用page-wrap而内容较少时,页脚粘在底部,则提花效果很好,否则会有滚动。 有没有办法以某种方式进行这种提琴演奏,因此它不应该依赖page-wrap而我只需要在page-wrap应用css。 我之所以要求这样做,是因为用这种方式制作了50多个页面,并且仅在页脚中添加了ss。 我只需要更改页脚的头文件。

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; 
}

编辑:

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

将此代码添加到您的jquery:

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

这是您的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;

}

没有.page-wrap:after

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM