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;
     
     
     
  • 相关阅读:
    GitLab 自动触发 Jenkins 构建
    微服务监控探索
    使用QUIC
    非对称加密与证书(上篇)
    Vue框架核心之数据劫持
    如何实现最佳的跨平台游戏体验?Unity成亮解密实时渲染
    网易易盾验证码的安全策略
    CodeForces 339C Xenia and Weights(暴力求解DFS)
    CodeForces 339D Xenia and Bit Operations (线段树)
    CodeForces 339B Xenia and Ringroad(水题模拟)
  • 原文地址:https://www.cnblogs.com/xiongzuyan/p/8534926.html
Copyright © 2011-2022 走看看