sticky footer
1547 ワード
完璧なcss絶対底部
携帯電話のWebページでは、コンテンツが少ない場合、footerはウィンドウの下部にあり、コンテンツが画面全体を占めている場合、footerはコンテンツの末尾についています.この場合、sticky footerを使用することができます.
レイアウトの前提:footerは本体コンテンツdivと同級である
スタイル:
参考:CSS Sticky Footer:完璧なCSS絶対底
携帯電話のWebページでは、コンテンツが少ない場合、footerはウィンドウの下部にあり、コンテンツが画面全体を占めている場合、footerはコンテンツの末尾についています.この場合、sticky footerを使用することができます.
レイアウトの前提:footerは本体コンテンツdivと同級である
スタイル:
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.clearfix:after {
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.main-wrap {
min-height: 100%;//
background: #ccc;
}
.main-wrap .main-content {
padding-bottom: 40px;// footer
}
.footer {
position: relative;
z-index: 100;
height: 40px;
margin:-40px auto 0 auto;//matgin-top footer
clear:both;
line-height: 40px;
text-align: center;
background: rgba(0,0,0,.5);
color: #fff;
}
参考:CSS Sticky Footer:完璧なCSS絶対底