页脚固定底部

时间 2019-12-08

标签页脚固定底部繁體版

原文原文链接

页脚固定底部

今天遇到一个问题：使用css实现页脚固定在底部，当内容不足一屏时，页脚在窗口底部，当大于一屏时在整个页面的最底部。总结两种实现方式：css

第一种：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚固定在页面底部</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    html,body {
        height: 100%;
    }
    #container {
        min-height:100%;
        height: auto !important;
        height: 100%; /*IE6不识别min-height*/
        position: relative;
    }
    #content {
        width: 100%;
        height: 300px;
        margin: 0 auto;
        padding-bottom: 60px;/*等于footer的高度*/
    }
    header {
        background-color: #080808;
        height: 60px;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;/*脚部的高度*/
        background-color: #080808;
        clear:both;
    }
</style>
<body>
<div id="container">
    <header>Header Section</header>
    <div id="content" class="clearfix">
        页面容容部分
    </div>
    <footer>Footer Section</footer>
</div>
</body>
</html>

将html和body标签中必须将高度(height)设置为“100%”,这样咱们就能够在容器上设置百分比高度，同时须要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0。
container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容不多（或没有内容）状况下，能保持100％的高度。
content这个容器有一个很关键的设置，须要在这个容器上设置一个padding-bottom值，并且这个值要等于（或略大于）页脚footer的高度（height）值。

第二种：浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚固定在页面底部</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,
        body{
            height: 100%;
            margin:0;
            padding:0;
        }
        #container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
        }
        header {
            height: 60px;
            background-color: #080808;
        }
        footer {
            height: 60px;
            clear:both;
            background-color: #080808;
        }
    </style>
</head>
<body>
<div id="container">
    <header>Header Section</header>
    <div id="page" class="clearfix">
        页面容容部分
    </div>
</div>
<footer>Footer section</footer>
</body>
</html>

这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果。spa

这两种方式结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。code