转载于自己的csdn博客
写界面时几乎每一个界面都会有顶部、中间内容、底部三个部分。
在写底部时，我们总是需要底部总是在最底下的部分。我常常会出现这样的情况：把一个个盒子按顺序写下去并所写的界面的顶部还有内容部分已经占满了整个页面，所以会很自然的把footer的盒子直接放在前面的盒子后面。
- 当前面内容的盒子足够大，足以撑开元素到浏览器底部时，紧跟在后面的footer盒子也会排在其后不用做任何处理就实现了footer在底部的操作。如下图左所示
- 当前面内容盒子不足以撑起到浏览器底部，如下图右所示，footer的下面大量留白。也就不能起到保持在最底部的作用了。
常见情况
解决方法
1. 适用于footer前面内容较少时的情况
在通过百度后，普遍找到了在css中加入position:absolute; bottom:0;的方法。在测试后发现这个方法在页面有留白的时候是非常好用的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.content{
background:orange;
width:100%;
height:800px;
}
.footer{
background:gold;
width:100%;
height:100px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">
<h1> header</h1>
</div>
<div class="content">
<h1>内容</h1>
</div>
<div class="footer">
<h1>footer</h1>
</div>
</body>
</html>
+absolute bottom
-
从上图左看出。当出现内容盒子不足以占满整个可视区域时。确实是能够使footer始终保持在界面的最底部，即使窗口变大或变小也不会动摇footer的最底部位置。
-
但随之而来也有一个小问题，当content部分的内容多于页面所能展示内容时，就会发生上图右的情况。content的内容在鼠标未下滑时和图左的显示一样，但是拖到后面的时候却发现，footer硬生生的把content隔开，并遮住了这一部分的内容。
- 产生这个问题的原因主要还是归咎于absolute的定位问题。
这个网址非常清晰向我们解释了，position:absolute中父元素的相关问题。position相对于祖先元素的定位
- 产生这个问题的原因主要还是归咎于absolute的定位问题。
在设置
position:absolute时，前面没有人为地设置祖先元素。 如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以<html>或<body>进行定位的。
对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。
position:absolute; bottom:0;的时候也就相当于把footer绝对定位在了获得的视口的底部。这也就是为什么footer会保持在窗口底部，并且在滚动鼠标看后面内容时，footer被固定和漂浮在内容上方的原因了。
</br>
</br>
</br>
以下来自于footer自粘五种方法+我的测试与总结
2.内容部分增加一个min-height:100%
HTML代码
<div class="header">
<h1> header</h1>
</div>
<div class="content">
<h1>内容</h1>
<div class="push"></div>
</div>
<div class="footer">
<h1>footer</h1>
</div>
css代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
/*
*重要部分添加，要给body和HTML初始为100%
*只有这样在后面用到min-height时才能让content部分盒子足以撑大到浏览器底部。*/
height:100%;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.content{
background:orange;
width:100%;
/*增加一个min-height，使其大小为100%，即与body同高。*/
min-height: 100%;
*height:800px;
}
.push,
.footer{
*background:gold;
opacity: 0.5;
width:100%;
height:100px;
}
</style>
代码效果：
代码效果
①body、html的height设置为100%，与视口同高；
②在footer前面定义一个大盒子包裹全部内容，并在大盒子中设置css的min-height为100%，保证足以撑到容器底部。
③在大盒子的底部增加一个类名为push的div，避免覆盖footer的内容。
缺点：
①我们常常需要的底部一般是版权信息，页面内容较少时自然是希望保持在视口的底部。但是因为光是content内容就占满了整个视口，所以footer则必须滚动条下拉才能看到底部内容。
这里写图片描述
②撑破容器了body还有html，可能会对其他的内容产生影响。
3.增加一个内部div(inner-content)使得bottom-padding=(footer)height
html代码
<div class="header">
<h1> header</h1>
</div>
<div class="content">
/*增加的inner-content*/
<div class="inner-content">
<h1>内容</h1>
</div>
</div>
<div class="footer">
<h1>footer</h1>
</div>
<style type="text/css">
html,body{
height:100%;
}
/*
* content保持不变
*/
.content{
/*增加一个min-height*/
min-height: 100%;
}
.inner-content{
background:green;
opacity:0.2;
padding: 20px;
padding-bottom: 100px;
}
.footer{
height:100px;
margin-top: -100px;
}
</style>
演示效果：
效果
①优化了方法2，使得内容较少的时候不用翻页去看footer
②删去了方法2中的.push盒子，取而代之的是包裹内容的一个inner-content与footer高度相等的padding-bottom，避免footer覆盖内容。
4.使用calc()计算内容的高度
这是我现在常在使用的方法。
html
<div class="content">
<h1>content</h1>
</div>
<div class="footer">
<h1>footer</h1>
</div>
css代码
<style type="text/css">
html,body{
height:100%;
}
.content{
/*min-height从100%变成calc(100vh - 70px)*/
min-height: calc(100vh - 1.00px);
}
.inner-content{
background:green;
opacity:0.2;
padding: 20px;
padding-bottom: 100px;
}
.footer{
height:100px;
}
</style>
效果
①运用calc(100vh - 其他块的大小)作为min-height，使得即使内容不够撑满窗口时，使得footer 刚好 在视口底部位置。
②删去了push、inner-content这些无实际意义的块。
缺点：
需要计算其他块的高度。
网友评论