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

2021/5/3 18:25:29

编程Tag： 页面底部 height footer background main padding 300px

本文主要是介绍将footer固定在页面底部的实现方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

方法一：footer高度固定+绝对定位

HTML结构+初始化CSS样式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试将footer固定在页面底部的实现方法</title>
 6     <style type="text/css">
 7         html, body {
 8             margin: 0;
 9             padding: 0;
10         }
11         .head {
12             width: 100%;
13             height: 100px;
14             background: teal;
15             text-align: center;
16             line-height: 300px;
17         }
18         .main {
19             width: 100%;
20             height: 200px;
21             background: orange;
22             text-align: center;
23             line-height: 300px;
24         }
25         .footer {
26             width: 100%;
27             height: 300px;
28             background: red;
29             text-align: center;
30             line-height: 300px;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="head">我是头部</div>
36     <div class="main">我是主体内容</div>
37     <div class="footer">我是底部</div>
38 </body>
39 </html>

加上之前的效果

CSS设置：

 1 .footer {
 2     width: 100%;
 3     height: 300px;
 4         background: red;
 5     text-align: center;
 6     line-height: 300px;
 7     /* footer高度固定+绝对定位（子绝父相），如果不行就加个!important，调高优先级 */
 8     position: absolute;
 9     bottom: 0;
10 }

首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；
其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；（可选）
最后，设置footer绝对定位，并设置height为固定高度值。

加上之后的效果

方法二：footer高度固定+margin负值

HTML结构：

1 <body>
2     <div class="container">
3         <header>header</header>
4         <main>main content</main>
5     </div>
6     <footer>footer</footer>
7 </body>

CSS设置：

1 html,body{height:100%;margin:0;padding:0;}
2 
3 .container{min-height:100%;}
4 header{background-color: #ffe4c4;}
5 main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
6 footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/* margin-top（负值的）高度等于footer的height值 */

此方法把footer之前的元素放在一个容器里面，形成了container和footer并列的结构：
首先，设置.container的高度至少充满整个屏幕；
其次，设置main（.container最后一个子元素）的padding-bottom值大于等于footer的height值；
最后，设置footer的height值和margin-top负值。

这种方法没有使用绝对定位，但html结构的语义化不如方法一中的结构清晰。

效果如下

这篇关于将footer固定在页面底部的实现方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！