zoukankan      html  css  js  c++  java
  • 页脚固定底部

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>页脚固定在底部显示</title>
    <style type="text/css">
    *{
    margin: 0;padding: 0;
    }
    html,body{height: 100%;}
    #main{
    height: auto;min-height: 100%;
    }
    #main .con{
    padding-bottom: 150px;
    }
    #footer{
    position: relative;height: 150px;
    margin-top: -150px;clear: both;background: #ccc;
    }
    .clearfix:after{
    content:".";
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix{
    height:1%;/* Hides from IE-mac */ /*zoom:1*/
    display: inline-block;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <div class="con" class="clearfix"></div>
    </div>
    <div id="footer">

    </div>
    </body>
    </html>

    第二种:flex布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    .Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    }
    /*相对于viewport高度大小的文字*/
    /*h1{font-size:8vh;}*/
    /*如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100*/
    .Site-content {
    flex: 1;
    }

    </style>
    </head>
    <body>

    <body class="Site">
    <header>...</header>
    <main class="Site-content">...</main>
    <footer>...</footer>
    </body>
    </body>
    </body>
    </html>

  • 相关阅读:
    linux基础知识-12
    linux基础知识-11
    linux基础知识-10
    安装与迁移Solo博客系统
    linux基础知识-9
    linux基础知识-8
    linux基础知识-7
    linux基础知识-6
    linux基础知识-5
    通俗解释下分布式、高并发、多线程
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6249263.html
Copyright © 2011-2022 走看看