PC版通用布局页面

来源：互联网发布：淘宝网秋冬半身裙编辑：程序博客网时间：2024/06/15 23:22

footer可以根据浏览器视口高度自适应显示位置，当页面垂直方向可以滚动时，footer显示在文档最底部，当不可滚动时，footer显示在浏览器视口最底部

    <div class="root">        <div class="place"></div>        <div class="content">            <div class="header">header</div>            <div class="main">main</div>        </div>        <div class="footer">footer</div>    </div>

        html,        body,        .root,        .place {            height: 100%;        }        body {            margin: 0;            font-size: 0;            line-height: 1;        }        .place,        .content {            display: inline-block;            vertical-align: top;            box-sizing: border-box;            padding-bottom: 100px;        }        .content {            width: 100%;        }        .header {            font-size: 26px;            text-align: center;            line-height: 100px;            background: blue;        }        .main {            font-size: 26px;            text-align: center;            line-height: 200px;            background: red;        }        .footer {            position: relative;            margin-top: -100px;            font-size: 26px;            text-align: center;            line-height: 100px;            background: gray;        }

阅读全文

0 0