问题描述： 当内容很多时，footer跟在内容后面；当内容不够一页时，footer位于最底下。
效果展示:
【有滚动条出现的时候，底部跟在内容后面，此时一屏下是看不到的】
【没有滚动条出现的时候，位于最底端，此时一屏下是能看到的】
23333 感觉效果展示 有点模糊…..
实现：
html {
height：100%；
}
body {
min-height:100%;
position:relative;
padding-bottom: 50px;
box-sizing: border-box;
}
footer {
position:absolute;
bottom:0;
width:100%;
text-align:center;
line-height:40px;
}
一个猝不及防的拓展
尝试下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>height</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body {
height: 100%;
}
div {
height: 20%;
background: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
结果展示：
噹噹噹！！！惊不惊喜，意不意外，感不感动
原因：不设置高度的情况下，块级元素的高度是由包裹的内容撑开的。html body 也会由子元素堆起来。
元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用，互相依赖，却都无法依赖，死循环了。
div的父元素是body，body的父元素是html，通过height:100%层层向上，找到顶级获取定高。
// 加上这个就好啦啦啦啦
html {
height: 100%;
}
扫一扫
3111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
