高度不固定的自适应布局

最新推荐文章于 2023-11-15 19:45:58 发布

李小苶

最新推荐文章于 2023-11-15 19:45:58 发布

阅读量3.6k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_26834399/article/details/93028362

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、目标

上面的布局看起来很常见，然而，附加额外条件后就显得有些棘手了。布局需要满足以下条件：

顶部区域高度不固定，由其子元素（子元素具有最小高度，但没有最大高度）自由撑开其高度；
左侧区域宽度固定，高度自适应，需要占满显示区域除顶部高度外的剩余高度，且不能超出；
右侧区域宽度高度均自适应，需要占满显示区域除顶部高度及左侧区域宽度外的剩余部分，且不能超出；
纯css实现，不能使用js获取DOM宽高。

二、实现

1、首先想到使用grid实现，简化代码如下

<body>
    <div class="container">
        <div class="grid-item1">
            1<br>2
            1<br>2
            1<br>2
            1<br>2
            1<br>2
            1<br>2
        </div>
        <div class="grid-item2">33333</div>
        <div class="grid-item3">44444</div>
    </div>
</body>

html,body{width: 100%; height: 100%;}
*{margin: 0;}
.container{
    display: grid;
    width: 100%;
    height: 100%;
    justify-items: stretch;
    grid-template-columns: 190px auto;
    grid-template-rows: auto auto;
    grid-template-areas: 'a a'
    'b c';
}
.grid-item1{
    grid-column-start: 1;
    grid-column-end: 3;
    background: #f0f;
}
.grid-item2{
    background: #ff0;
    width: 200px;
}
.grid-item3{
    background: #f00;
}

若将grid-template-rows中第一行的高度设置为auto，浏览器自动分配后头部的高度会超出子元素实际需要的高度，实现结果如下。

若将grid-template-rows中第一行的高度设置为固定高度，如grid-template-rows:100px auto。当子元素内容过多时，不能将高度撑开，会被隐藏，实现效果如下：

目前没有使用grid布局实现我的需求，如果有大神可以用gird实现，希望可以留言。在尝试gird无果后，看到有人调侃grid又回归到了table布局的时代，遂考虑使用table尝试一下效果。

2、回归原始table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        html,body{width: 100%; height: 100%;}
        *{margin: 0;}
    </style>
</head>
<body>
    <table style="width: 100%;height: 100%;">
        <tr style="height: 100px">
            <td style="background: #f0f" colspan="2">
                1<br>2
                1<br>2
                1<br>2
                1<br>2
                1<br>2
                1<br>2
            </td>
        </tr>
        <tr>
            <td style="background: #ff0; width: 200px;">
                <div style="width: 100%;height: 100%;">33333</div>
            </td>
            <td style="background: #f00;">
                <div style="width: 100%;height: 100%;">44444</div>
            </td>
        </tr>
    </table>
</body>
</html>

实现结果如下，即使设置的第一行固定高度为100px，当顶部区域子元素过多时，也会自动撑开高度，符合我所有的需求。

李小苶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高度不固定的自适应布局

一、目标上面的布局看起来很常见，然而，附加额外条件后就显得有些棘手了。布局需要满足以下条件：顶部区域高度不固定，由其子元素（子元素具有最小高度，但没有最大高度）自由撑开其高度；左侧区域宽度固定，高度自适应，需要占满显示区域除顶部高度外的剩余高度，且不能超出；右侧区域宽度高度均自适应，需要占满显示区域除顶部高度及左侧区域宽度外的剩余部分，且不能超出；纯css实现，...
复制链接

扫一扫