zoukankan      html  css  js  c++  java
  • Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="Author" content="胡超">
    <title>super胡</title>
    <style>
    * {
    margin:0;
    padding:0;
    }
    html,body, #wrap
    {
    height: 100%;
    }
    body > #wrap
    {
    height: auto;
    min-height: 100%;
    }
    #main
    {
    padding-bottom: 150px;
    } /* must be same height as the footer */
    #footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    border-color:1px solid red;
    background:red;
    }
    /* CLEAR FIX*/
    .clearfix:after
    {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {display: inline-block;
    }
    /* Hides from IE-mac */
    .clearfix { height: 1%;/*zoom:1*/
    }

    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="main" class="clearfix">
    </div>
    </div>
    <div id="footer"> sagsdhgdf
    </div>
    </body>
    </html>
    你会发现,页脚的高度在这里被重复使用了三次,这是至关重要的,而且三个高度必须使用同样的值。wrap <div>的height属性把自己拉伸至窗口全部高度的尺寸,负的margin会把footer提高到main <div>的padding的位置上去,因为main已经在wrap的里面,所以main的padding已经是wrap 100%高度的一部分。 这样,footer就留在页面的底部了。

    现在还不算完成,我们还需要去clearfix main <div>。
    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}

  • 相关阅读:
    ubuntu安装mysql并修改编码为utf-8
    ubuntu16.04安装jdk1.8
    解决 Can't Connect to MySQL Server on IPAddress (10061) 的问题
    使用开源数据库客户端DBeaver连接DB2数据库
    Windows下使用console线连接思科交换机
    win7安装JDK6
    Python将excel文件从xls转换为xlsx
    Windows使用Gitblit搭建Git服务器
    B树、B-树、B+树、B*树
    必须熟悉的vim快捷键操作
  • 原文地址:https://www.cnblogs.com/12606huchao/p/4878759.html
Copyright © 2011-2022 走看看