Footer部分永遠沉底。

時間 2019-11-08

標籤 footer 部分永遠简体版

原文原文鏈接

　　那麼如何將Web頁面的「footer」部分永遠固定在頁面的底部呢？（注意了這裏所說的是頁腳footer永遠固定在頁面的底部，而不是永遠固定在顯示器屏幕的底部）html

　　就是當內容只有一點點時，Web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠在頁面的底部，也就是，Footer部分永遠沉底。瀏覽器

方法

　1. HTML結構：code

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

　2. CSS代碼：htm

* {
            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底部，也就是固定在頁面的底部。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。