HTML+CSS底部footer两种固定方式

最新推荐文章于 2022-09-09 06:57:17 发布

pan_junbiao

最新推荐文章于 2022-09-09 06:57:17 发布

阅读量7.1k

点赞数 8

分类专栏： HTML和CSS 文章标签： html

原文链接：https://blog.csdn.net/xianglikai1/article/details/78411615

版权

HTML和CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

网页常见的底部栏（footer）目前有两种：

一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现；

二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；

一、永久固定

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        body {
            padding-bottom: 50px;
        }
 
        .footer {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;
            background-color: #eee;
            z-index: 9999;
        }
    </style>
</head>
<body>
    内容，可以大量复制看效果<br />
 
    <div class="footer">固定在底部</div>
</body>
</html>

二、相对固定

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
 
        html, body {
            height: 100%;
        }
 
        .footer {
            margin-top: -50px;
            height: 50px;
            background-color: #eee;
            z-index: 9999;
            clear: both;
        }
 
        .wrap {
            min-height: 100%;
        }
 
        .main {
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="main">
            内容，可以大量复制看效果<br />
 
        </div>
    </div>
    <div class="footer">相对在底部</div>
</body>
</html>

网友的补充：

weixin_44889223：第二种方法有缺陷一。z-index只作用于定位元素，footer没给定位如何生效二。如果按照上述方法，当在class为main的div里给两个浮动的子div，底部定位就会失效，解决办法应当是在footer的样式里，再加上clear：both属性，这样才能满足日常布局需要。

原文作者：小巷而已

原文地址：https://blog.csdn.net/xianglikai1/article/details/78411615

（感谢原文作者的分享）

pan_junbiao

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS底部footer两种固定方式

网页常见的底部栏（footer）目前有两种：一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现；二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；一、永久固定<!DOCTYPE html><html><head> <meta http-equiv="Co
复制链接

扫一扫