Footer部分永远沉底

jiezi

5 年前

那么如何将 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>

原理

<html> 和 <body> 标签 ：html 和 body 标签中必须将高度(height) 设置为“100%”, 这样我们就可以在容器上设置百分比高度。同时需要将 html,body 的 margin 和 padding 都移除，也就是 html,body 的 margin 和 padding 都为 0。
div#container 容器 ：div#container 容器将高度(height) 设置为“100%”;overflow-x: hidden;，好让内容在 container 容器内滚动。
div.content 容器 ：div.content 容器必须设置一个最小高度(min-height) 为 100%，这主要使他在内容很少（或没有内容）情况下，能保持 100%的高度。另外我们还需要在 div.content 容器中设置一个 ”position:relative” 以便于里面的元素进行绝对定位。再有就是设置一个 padding-bottom 值，而且这个值要等于（或略大于）页脚 div.footer 的高度（height）值。
div.footer 容器：div.footer 容器必须设置一个固定高度。div.footer 还需要进行绝对定位，并且设置 bottom:0，让 div.footer 固定在容器 div.content 的底部。这样就可以实现我们前面所说的效果，当内容只有一点时，div.footer 固定在屏幕的底部（因为 div.content 设置了一个 min-height:100%），当内容高度超过屏幕的高度，div.footer 也固定在 div.content 底部，也就是固定在页面的底部。