Footer部分永远沉底。

2024年5月11日 152次阅读 来源: 卡米撒吗

　　那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？（注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部）

　　就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，也就是，Footer部分永远沉底。

  • 方法

　1. HTML结构：

         <div id="container">
            <div class="content">
                <ul>
                    <li>内容</li>
                </ul>
                <div class="footer"></div>
            </div>
        </div>

　2. CSS代码：

        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        html,
        body {
            height: 100%;
        }
        
        #container {
            height: 100%;
            background-color: red;
            overflow-x: hidden;
        }

        .content {
            position: relative;
            min-height: 100%;
            background-color: yellow;
            padding-bottom: 70px;
            box-sizing: border-box;
        }

        .footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 70px;
            background-color: blue;
        }
        
         <div class="container">
            <div class="content">
                <ul>
                    <li>内容</li>
                </ul>
                <div class="footer"></div>
            </div>
        </div>
    • 原理
    1. <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度。同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0。
    2. div#container容器：div#container容器将高度(height)设置为“100%”;overflow-x: hidden;，好让内容在container容器内滚动。
    3. div.content容器：div.content容器必须设置一个最小高度(min-height)为100％，这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div.content容器中设置一个”position:relative”以便于里面的元素进行绝对定位。再有就是设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div.footer的高度（height）值。
    4. div.footer容器：div.footer容器必须设置一个固定高度。div.footer还需要进行绝对定位，并且设置bottom:0，让div.footer固定在容器div.content的底部。这样就可以实现我们前面所说的效果，当内容只有一点时，div.footer固定在屏幕的底部（因为div.content设置了一个min-height:100%），当内容高度超过屏幕的高度，div.footer也固定在div.content底部，也就是固定在页面的底部。
        原文作者：卡米撒吗
        原文地址: https://segmentfault.com/a/1190000020251348
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞