问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

上中下三栏布局如何让它们自适应高度

头像
vvhl
    64125143173
    <!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>

    clipboard.png

    如上面所示，一共有上、中、下三块div，希望得到的结果是上中下之间的间距固定为10px，其他部分全部自适应（第一栏是固定的高度，其他两栏是百分比的高度），总高度为100%；单纯用css有办法实现吗？

    布局web前端csshtml
    阅读 4.5k
    4 个回答
    得票最新
    头像
    kaipizhe
      1.6k29195272
      ✓ 已被采纳
      <!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>
      头像
      leohxj
        678194448
        头像
        白吟灵
          2k1315

          不才，只会写一行定高，一行自适应的布局。不嫌嵌套麻烦的话还是用楼上的代码吧。

          <!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>
          头像
          Hxzzz
            1238

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

            <!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>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题