前端基础复习--疑问之等高布局用margin-bottom和padding-bottom的原理

最新推荐文章于 2021-08-22 18:34:46 发布

I have a lemon

最新推荐文章于 2021-08-22 18:34:46 发布

阅读量787

点赞数 1

分类专栏：前端文章标签： css3 html5 html css

原文链接：https://www.jianshu.com/p/a75a27e8d1d6

版权

前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

转载自https://www.jianshu.com/p/a75a27e8d1d6

浏览器兼容最好最简便的应该是 padding补偿法。

首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值，父容器设置超出隐藏.

这个布局技巧的原理是：我们设置每一列的padding-bottom足够大（根据盒模型，背景色存在于padding上），但这撑大了外层容器的高度，接着我们通过设置列的margin-bottom为负值（绝对值与padding-bottom相等），并且外层容器的overflow为hidden，使容器高度回到原有值，它截断了每一列，这看起来就是我们想要的效果。

这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

没有等高布局：

代码：注释部分加上为等高

<!DOCTYPE html>
<html>
<head>
    <title>CSS多列等高布局</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        .container{
            margin: 0 auto;
            width: 500px;
        /*  overflow: hidden;*/
        }
            .left{
            background-color: #f0f0db;
            float: left;
            width: 30%;
        /*  padding-bottom: 2000px;
            margin-bottom: -2000px;*/
        }
        .right{
            background-color: #f0c0c0;
            float: left;
            width: 70%;
            /*padding-bottom: 2000px;
            margin-bottom: -2000px;*/
        }
    </style>
</head>
<body>
    <div class="left">This is 30% left.</div>
    <div class="right">This is 70% right.<br><br><br><br>higher</div>
 
</body>
</html>

I have a lemon

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端基础复习--疑问之等高布局用margin-bottom和padding-bottom的原理

转载自https://www.jianshu.com/p/a75a27e8d1d6浏览器兼容最好最简便的应该是 padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值，父容器设置超出隐藏.这个布局技巧的原理是：我们设置每一列的padding-bottom足够大（根据盒模型，背景色存在于padding上），但这撑大了外层容器的高度，接着我们通过设置列的margin-bottom
复制链接

扫一扫