04.stickyfooter
在移动端,有时候我们希望一个元素始终处于页面底端,不会随着页面内容的变化而改变位置。这个元素我们称为stickyfooter。实现起来还是很简单的,通过继承把内容容器的最小高度设置为整个视口的大小,并且设置下内边距为footer留出空间。
少啰嗦上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<title>sticky_footer</title>
<style>
*{
margin: 0;
padding:0;
}
html,body{
/* 继承整个视口的高度 */
height: 100%;
}
#content,{
overflow: hidden;
/* 设置内容容器的最小高度为整个视口的大小 */
min-height: 100%;
}
#content_in{
/* 设置内容下边距 流出空白区域显示footer*/
padding-bottom: 40px;
}
#footer{
height: 40px;
background-color: #FF4500;
text-align: center;
line-height: 40px;
margin-top: -40px;
}
</style>
</head>
<body>
<div id="content">
<div id="content_in">
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
xxxxxx<br />
</div>
</div>
<!-- 特别注意,footer一定要是body的直接子元素 -->
<div id="footer">X</div>
</body>
</html>