当前位置：文江博客话题详情

CSS HTML Web 布局前端

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

发布于 2022-09-06 20:42:10 字数 1411 浏览 13 评论 0

<!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，希望得到的结果是上中下之间的间距固定为10px，其他部分全部自适应（第一栏是固定的高度，其他两栏是百分比的高度），总高度为100%；单纯用css有办法实现吗？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

半步萧音过轻尘 2022-09-13 20:42:10

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

掩于岁月 2022-09-13 20:42:10

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

茶花眉 2022-09-13 20:42:10

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

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

知你几分 2022-09-13 20:42:10

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

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

~没有更多了~

关于作者

树深时见影

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

金兰素衣

文章 0 评论 0

ゃ人海孤独症

文章 0 评论 0

没有感情的刽子手

文章 0 评论 0

一枫情书

文章 0 评论 0

清晰传感

文章 0 评论 0

mb_XvqQsWhl

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文