上中下三欄布局如何讓它們自適應(yīng)高度

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .top{
            width: 100%;
            height: 60px;
            background: #555;
        }
        .middle{
            width: 100%;
            height: 65%;
            background: #999;
            margin-top: 10px;
        }
        .bottom{
            width: 100%;
            height: 20%;
            background: #ccc;
            margin-top: 10px;
            position: absolute;
            bottom: 0;
        }
    </style>
  </head>
  <body>
    <div class="wrap">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
  </body>
</html>

如上面所示，一共有上、中、下三塊div，希望得到的結(jié)果是上中下之間的間距固定為10px，其他部分全部自適應(yīng)（第一欄是固定的高度，其他兩欄是百分比的高度），總高度為100%；單純用css有辦法實現(xiàn)嗎？

回答

編輯回答

祈歡

Flex 了解一下: https://css-tricks.com/snippe...

demo

2017年9月25日 10:57

編輯回答

陪我終

不才，只會寫一行定高，一行自適應(yīng)的布局。不嫌嵌套麻煩的話還是用樓上的代碼吧。

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" />
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body,html {
                writing-mode: vertical-lr;
                height: 100%;
            }
            
            .wrapper {
                background: grey;
                width: 500px;
                height: 100%;
            }
            
            .wrapper span {
                writing-mode: lr;
            }
            
            header {
                width: 100%;
                height: 100px;
                float: left;
                background: red;
            }
            
            article {
                width: 100%;
                margin-top: 120px;
                background: yellow;
            }
            
            footer {
                width: 100%;
                background: green;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <header>
                <span>header</span>
            </header>
            <article>
                <span>article</span>
            </article>
            <!--<footer>
    <span>footer</span>
  </footer>-->
        </div>
    </body>

</html>

2018年6月23日 01:03

編輯回答

維她命

第一塊固定高度，第二第三塊按比例分配剩下的高度。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
        }
        .wrap{
            position: relative;
            width: 100%;
            height: 100%;
            padding-top: 60px;
        }
        .top{
            width: 100%;
            height: 60px;
            background: #555;
            position: absolute;
            top: 0;
        }
        .middle{
            width: 100%;
            height: 65%;
            background: #999;
            padding-top: 10px;
            position: relative;
        }
        .bottom{
            width: 100%;
            height: 35%;
            background: #ccc;
            padding-top: 10px;
            bottom: 0;
            position: relative;
        }
        .wrap2{
            height: 100%;
            position: relative;
        }
        .blank{
            position: absolute;
            top: 0;
            height: 10px;
            width: 100%;
            background: white;
        }
    </style>
  </head>
  <body>
    <div class="wrap">
        <div class="top"></div>
        <div class="wrap2">
            <div class="middle">
                <div class="blank"></div>
            </div>
            <div class="bottom">
                <div class="blank"></div>
            </div>
        </div>
    </div>
  </body>
</html>

2018年1月19日 04:39

編輯回答

紓惘

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
             position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .top{
            width: 100%;
            height: 60px;
            background: #555;
        }
        .wrap2{
            position: relative;
            width: 100%;
            height: 100%;
            margin-top: 10px;
        }
        .middle{
            width: 100%;
            height: 65%;
            background: #999;
        }
        .wrap3{
            position: relative;
            height: 35%;
        }
        .bottom {
            position: relative;
            width: 100%;
            height: 100%;
            background: #ccc;
            margin-top: 10px;
            bottom: 0;
        }
    </style>
  </head>
  <body>
    <div class="wrap">
        <div class="top"></div>
        <div class="wrap2">
            <div class="middle"></div>
            <div class="wrap3">
                <div class="bottom"></div>
            </div>
        </div>
    </div>
  </body>
</html>

2017年7月25日 22:37