[英]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.