Heim  >  Artikel  >  Web-Frontend  >  Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)_html/css_WEB-ITnose

Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:35:22842Durchsuche






super胡










你会发现,页脚的高度在这里被重复使用了三次,这是至关重要的,而且三个高度必须使用同样的值。wrap
的height属性把自己拉伸至窗口全部高度的尺寸,负的margin会把footer提高到main
的padding的位置上去,因为main已经在wrap的里面,所以main的padding已经是wrap 100%高度的一部分。 这样,footer就留在页面的底部了。

现在还不算完成,我们还需要去clearfix main


.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
Stellungnahme:
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