<body>
<div class="contentAdd">
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
</div>
<div class="footer">
<button>我是底部</button>
</div>
</body>
当页面加载出来的时候,问题如下图:
这个时候我有下面的四种解决方案:
第一种:在包含内容的块级元素里添加padding-bottom,至于要给多少像素值的话才不会遮挡的话,取决于底部的高度为多少,比如底部footer的高度是40px,如我这里的包含内容的块级元素是contentAdd,直接就可以给它追加这个属性那就padding-bottom:40px; 或是追加margin-bottom:40px; 都可以解决问题
第二种:在包含内容的块级元素里添加伪元素:after, 比如foonter的底部高度为4rem,我这里包含内容的块级元素是contentAdd给:after添加一个height,然后就可以解决了,具体的实现代码如下:
.contentAdd::after{
content: '';
height: 4rem;
width:100%;
display: block;
}
第三种:<footer>块之外再包裹一层div,然后再增加一个与<footer>同级的<div>块,这个<div>块的高度设置为与<footer>同样高,不包含任何内容,这样就可以起到一个占位符的效果,在页面最底占据与<footer>同样高度的空间,当然页面滑到最下方,原本的<footer>悬动块就会与这个占位块完美重叠。且不会对其他页面产生影响。
<body>
<div class="contentAdd">
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
<div class="content">你好呀</div>
</div>
<!--充当占位符的div块,无实质内容 -->
<div style="height:60px;"></div>
<div class="footer">
<button>我是底部</button>
</div>
</body>
第四种:通过js控制高度
//滚动条在Y轴上的滚动距离
function getScrollTop(){
return document.body.scrollTop;
}
//文档的总高度
function getScrollHeight(){
return document.body.clientHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
{
windowHeight = document.documentElement.clientHeight;
}
else
{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//滑动监听
window.onscroll = function(){
//滑到底部时footer定于最下方,假定<footer>的height为60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}