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

jiezi

5 年前

<!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>

<!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>

<!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>

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

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

1、绝对定位

2、弹性布局

3、网格布局

4、表格布局