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;
     
     
     
  • 相关阅读:
    基于WPF的UI自动化测试[1] 自动化测试工具
    PSR
    技术型人员如何晋升项目经理
    HyperV 组件架构(1)—总体架构
    从技术到管理:工作转型后角色定位
    Web性能优化方案
    一个项目经理的一些个人体会
    从技术人才到项目管理的跨越
    研发项目经理的管理
    从程序类转向销售类工作,该如何进行?
  • 原文地址:https://www.cnblogs.com/xiongzuyan/p/8534926.html
Copyright © 2011-2022 走看看