                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /一课全面掌握主流CSS布局

为什么设置 padding-bottom, margin-bottom 的极大值再加上 overflow:hidden 就可以等高呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高布局-02</title>
    <style>
        .parent{
            overflow: hidden;
        }
        .left, .right{
            width: 300px;
            float: left;

            padding-bottom: 9999px;
            /* 向上移动 */
            margin-bottom: -9999px;
        }
        .left{
            background-color: tomato;
        }
        .right{
            background-color: teal;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
            left is left
        </div>
        <div class="right">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, rerum. Commodi in aspernatur asperiores reiciendis ipsum ex voluptas amet sequi. Voluptate nulla laborum molestias placeat natus officiis animi officia quas.
        </div>
    </div>
</body>
</html>

摔跤手

2020-09-01

源自：一课全面掌握主流CSS布局 10-3

关注问题我要回答

676

操作

收起

2 回答

ccyy_阿亮
2020-11-24

最初是想让padding-bottom加长所有列，再使用"overflow: hidden"将它们一刀切成高度相同的列（超过父容器边框都被隐藏掉）。
但是你会发现父容器没有显式设置高度（依赖子元素），父容器一直包裹着子元素，这样会导致"overflow: hidden"不生效。那么这个场景下就得考虑让父容器边框范围收缩（让子元素边框超过父容器边框）。
margin-bottom取负值就可以让子元素盒子实际占用尺寸减少（content+padding+border+margin），但又不会影响到子元素边框（content+padding+border）。对应父容器内部被占用的空间减少，父容器边框范围收缩，"overflow: hidden"就可以生效了。（margin不会影响子元素边框，通过影响子元素实际占用尺寸来影响父容器边框）

这个等高布局涉及的知识点还是挺多的，比如"overflow: hidden"何时触发、内外边距对盒子的影响、盒子未显式设置高度时的处理。