使用flex实现一个固定在底部的footer

最新推荐文章于 2024-06-12 16:49:26 发布

then啥

最新推荐文章于 2024-06-12 16:49:26 发布

阅读量7.9k

点赞数

分类专栏： html、css

本文链接：https://blog.csdn.net/weixin_41702247/article/details/84403723

版权

html、css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

要求：

实现一个footer页脚，内容不足一页时在底部显示，当内容超过一屏高度时依然在内容底部

实现要点：

html要设置height为100%
body要设置min-height为100%
必须直接将内容区包裹在body内，且display: flex;
给需要占满整屏的元素添加flex: 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }

        .main {
            flex: 1;
        }
    </style>
</head>
<body>
    <div style='background-color:pink' class='header'>title</div>
    <div style='background-color:lightgreen' class='main'>main</div>
    <div style='background-color:lightblue' class='footer'>footer</div>

</body>
</html>

then啥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用flex实现一个固定在底部的footer

要求：实现一个footer页脚，内容不足一页时在底部显示，当内容超过一屏高度时依然在内容底部实现要点：html要设置height为100% body要设置min-height为100% 必须直接将内容区包裹在body内，且display: flex; 给需要占满整屏的元素添加flex: 1; &lt;!DOCTYPE html&gt;&lt;html lang="en"&...
复制链接

扫一扫

专栏目录