将footer固定在页面底部的实现方法

方法：使用position属性的fixed属性值实现指定元素固定到某处

当前HTML结构：footer的直接父节点为body，且其他兄弟节点都没有用container容器包裹起来

HTML结构：

1 <body>
2     <div id="head">我是头部</div>
3     <div id="main">我是主体内容</div>
4     <div id="footer">我是底部</div>
5 </body>
View Code

CSS样式：

 1 html, body {
 2     height: 100%;
 3     min-height: 100%;
 4     margin: 0;
 5     padding: 0;
 6 }
 7 
 8 /* 这里采用固定定位，如果不生效，可以尝试加上!important，提高优先级别*/
 9 .m-footer-position {
10     position: fixed !important;
11     bottom: 0 !important;
12     width: 100%;
13 }
View Code

JS行为代码：根据浏览器页面当前有无滚动条来决定是否给指定元素设置固定定位（这里需要给这个元素一个id，方便获取并操作）

 1 <script type="text/javascript">
 2     // 判断是否有滚动条
 3     if (hasScrollbar()) {
 4         $("#footer").removeClass("m-footer-position");
 5     } else {
 6         $("#footer").addClass("m-footer-position");
 7     }
 8     function hasScrollbar() {
 9         return document.body.scrollHeight > (window.innerHeight ||
10                 document.documentElement.clientHeight);
11     }
12 </script>
View Code

 

posted @ 2021-05-03 17:43  没有你哪有我  阅读(225)  评论(0)  编辑  收藏  举报