#笔记简单使用flex与sticky footer方式解决底部固定在底栏的问题

最新推荐文章于 2023-07-31 10:55:14 发布

alisaLearn

最新推荐文章于 2023-07-31 10:55:14 发布

阅读量2.3k

点赞数

分类专栏：布局文章标签： flex 底部页脚

本文链接：https://blog.youkuaiyun.com/alisalearn/article/details/77533213

版权

布局专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用flex布局和sticky footer技术解决页面底部始终固定在底部的问题，包括两种方法的实现细节和效果对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题
许多大型网站都有一个底栏，不论内容的高度是否填满屏幕，底栏都一直在页面的最底部。

这个效果看似简单，却有不少的“坑”，下面我来介绍两种方法解决这个问题。
第一个方法（引用中注释的css）使用了固定定位解决
第二种方法使用的是flex布局解决的
*具体请参考：<<css secret>> -41项 紧贴底部的页脚*

要注意的是第一种方法必须设置外层容器的最小高度为100%
第二种方法使用了flex属性，flex包含三种属性,这里用到flex-grow: 设置放大比例

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background-color: #f3f3f3;
            height: 100%;
        }
        /*
        .container {
            position: relative;
            width: 100%;
            min-height: 100%;
        }

        .content {
            width: 100%;
            height: 600px;
            background: red;
        }

        .footer {
            height: 200px;
            width: 100%;
            background: yellow;
            position: absolute;
            bottom: 0;
        } */


        /*flex 布局 */

        .container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .content {
            width: 100%;
            height: 600px;
            background: red;
            flex: 1 0 auto;
        }

        .footer {
            height: 200px;
            width: 100%;
            background: yellow;
            flex: 0 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>

</html>