zoukankan      html  css  js  c++  java
  • 页面footer在底部

    页脚动态贴在底部需要满足以下两个条件:

    • 当主体的内容高度不超过可视区域高度的时候,页脚贴在页面底部。
    • 当主体的内容高度超过可视区域高度的时候,页脚将按正常布局。

    方法一:footer高度固定+绝对定位

    <body>
        <header>header</header>
        <main>content</main>
        <footer>footer</footer>
    </body>
    html{height:100%;}
    body{min-height:100%;margin:0;padding:0;position:relative;}
    
    header{background-color: #ffe4c4;}
    main{padding-bottom:100px;background-color: #bdb76b;}
    footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

    方法二:footer高度固定+margin负值

    <body>
        <div class="container">
            <header>header</header>
            <main>main content</main>
        </div>
        <footer>footer</footer>
    </body>
    html,body{height:100%;margin:0;padding:0;}
    
    .container{min-height:100%;}
    header{background-color: #ffe4c4;}
    main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
    footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}

    方法三:css table实现的圣杯布局

    <div class="wrapper">
    <div class="header">头部</div>
    <div class="main">
    <div class="box sidebar">左侧栏</div>
    <div class="box content">主体内容</div>
    <div class="box sidebar">有侧栏</div>
    </div>
    <div class="footer">页脚底部</div>
    </div>

    body {
      background: @beige;
    color: black;
    }

    .wrapper {
    height: 100%;
    display: table;
    100%;
    text-align: center;
    }

    .header {
    display: table-row;
    height: 1px;
    background: @yellow;
    }

    .main {
    height: 100%;
    display: table;
    100%;
    }

    .box {
    display: table-cell;
    }

    .sidebar {
    100px;
    background: @orange;
    }

    .footer {
    display: table-row;
    height:1px;
    background: @green;
    color: @beige;
    }

    @orange: #BD4932;
    @yellow: #FFD34E;
    @green: #105B63;
    @beige: #FFFAD5;
     
     
     
  • 相关阅读:
    mysql general log使用介绍
    是否可以根据GTID 选出日志最新的实例
    python踩坑现场,看起来一样的两个字符串,却不相等
    sql case when的使用
    golang 匿名结构体成员,具名结构体成员,继承,组合
    golang go-sql-driver/mysql基本原理
    raft协议中的日志安全性
    go get 安装 go.etcd.io etcd clientv3 报错
    ZGC
    发现jdk9之后,AQS代码有啥变化了吗
  • 原文地址:https://www.cnblogs.com/xiongzuyan/p/8534926.html
Copyright © 2011-2022 走看看