Heim > Web-Frontend > HTML-Tutorial > footer固定在页面底部的若干种方法_html/css_WEB-ITnose

footer固定在页面底部的若干种方法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:35:00
Original
1037 Leute haben es durchsucht

1 <div class="header"><div class="main"></div></div>2 <div class="container"><div class="main"></div></div>3 <div class="footer"><div class="main"></div></div>
Nach dem Login kopieren

如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考。(欢迎大家积极补充。)

以上布局为给个人写页面常用。

注:.main{

width:1050px;

margin:0 auto;

height:auto;

}

1、这是刚刚使用过的css,可以达到效果,只是不论浏览器的大小如何footer均会在底,主体内容则以滚动条形式显示。

.footer{

position:fixed;

bottom:0;

left:0;

}

2.待整理。。。。。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage