> 웹 프론트엔드 > HTML 튜토리얼 > Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:35:22
원래의
913명이 탐색했습니다.






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%;}
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿