CSS实现Footer置底

最新推荐文章于 2022-11-25 16:36:28 发布

wf2017

最新推荐文章于 2022-11-25 16:36:28 发布

阅读量1.4k

点赞数

分类专栏： css布局文章标签：前端布局 css

本文链接：https://blog.csdn.net/wf2017/article/details/56479732

版权

css布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面置底就是让网页的footer部分始终在浏览器窗口的底部。

实现方法：

方法1：给html高度设置100%，body设置min-height:100%,把底部绝对定位到body的底部

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html{
            height: 100%;
        }
        body{
            position: relative;
            min-height: 100%;
        }
        .footer{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
<div class="footer"></div>  
</body>
</html>

方法2：将内容部分的底部外边距设置为负数，把内容的最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持再窗口底部，当高度超出则随之推出的效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        .wrapper{
            min-height: 100%;
            /*等于footer的高度*/
            margin-bottom: -50px;
        }
        .footer,.push{
            height: 50px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    content
    <div class="push"></div>
</div>
<div class="footer"></div>  
</body>
</html>

这个方法需要容器里有额外的占位元素（如.push）

需要注意的时.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不是太友好。

方法3：将页脚的顶部外边距设为负数

在容器上使用负margin-top,给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        .content{
            min-height: 100%;
        }
        .content-inside{
            padding: 20px;
            padding-bottom: 50px;
        }
        .footer{
            height: 50px;
            margin-top: -50px;
            background-color: #f00;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="content-inside">
        content
    </div>
</div>  
<div class="footer"></div>
</body>
</html>

这个方法需要多添加一个包裹层

方法4：使用calc()设置内容的高度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
        }
        .content{
            min-height: calc(100vh - 50px);
        }
        .footer{
            height: 50px;
            background-color: #f00;
        }
    </style>
</head>
<body>
<div class="content">
    content
</div>  
<div class="footer"></div>
</body>
</html>

方法5：使用flexbox弹性盒布局

以上三种方法的footer高度都说固定的，通常来说不利于网页布局：内容会改变，它们都说弹性的，一旦内容超出固定高度就会破坏布局，所以给footer使用flexbox,让它的高度可以变大变小。

以上方法，第一种方法是自己总结的，其他方法是参考文章《css 5种方式实现Footer置底》