上下高度固定(100px),中间自适应

1、绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>absolute</title>
        <style>
        html,body{
            height:100%;
        }
        </style>
    </head>
    <body>
        <style>
        .container>div {
            position: absolute;
            width : 100%;
        }
        .header {
            top: 0;
            height: 100px;
            background-color: red;
        }
        .body {
            top: 100px;
            bottom: 100px;
            background-color: blue;
        }
        .footer {
            bottom: 0;
            height: 100px;
            background-color: red;
        }
        </style>
            <div class="container">
              <div class="header"></div>
              <div class="body"></div>
              <div class="footer"></div>
            </div>
          </body>
</html>

2、弹性布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .body {
            flex: 1 1 auto;
            background-color: blue;
        }
        .header, .footer {
            height: 100px;
            flex: 0 0 auto;
            background-color: red;
        }
        </style>
            <div class="container">
              <div class="header"></div>
              <div class="body"></div>
              <div class="footer"></div>
            </div>
    </body>
</html>

3、网格布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grid</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            display: grid;
            height : 100%;
            grid-template-rows : 100px auto 100px;
        }
        .header, .footer{
            background-color:red;
        }
        .body {
            background-color:blue;
        }
        </style>
        <div class="container">
            <div class="header"></div>
            <div class="body"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

4、表格布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>table</title>
        <style>
            html,body{
                height:100%;
            }
        </style>
    </head>
    <body>
        <style>
        .container {
            display: table;
            height : 100%;
            width :100%;
        }
        .container>div{
            display: table-row;
        }
        .header,  .footer  {         
            height:100px;
            background-color:red;
        }
        .body {
            background-color:blue;
        }
        </style>
        <div class="container">
            <div class="header"></div>
            <div class="body"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

PS:不知道为什么表格布局里面设置背景颜色无效,自己在那时还是没有解决。当然这也算是在这种情况下使用表格布局的一个缺点吧,背景色容易被屏蔽。有哪位童鞋能够很好处理这个问题的还请指教一波,谢谢> <

    原文作者:皮卡丘丘丘
    原文地址: https://segmentfault.com/a/1190000020100762
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞