上下高度固定（100px），中間自適應

時間 2019-11-10

標籤上下高度固定 100px 中間自適應欄目 CSS 简体版

原文原文鏈接

一、絕對定位

<!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：不知道爲何表格佈局裏面設置背景顏色無效，本身在那時仍是沒有解決。固然這也算是在這種狀況下使用表格佈局的一個缺點吧，背景色容易被屏蔽。有哪位童鞋可以很好處理這個問題的還請指教一波，謝謝> <html