为什么设置 padding-bottom, margin-bottom 的极大值再加上 overflow:hidden 就可以等高呢
摔跤手
2020-09-01 23:05
<!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>
2回答
-
- ccyy_阿亮
- 2020-11-24 00:59:05
最初是想让padding-bottom加长所有列，再使用"overflow: hidden"将它们一刀切成高度相同的列（超过父容器边框都被隐藏掉）。
但是你会发现父容器没有显式设置高度（依赖子元素），父容器一直包裹着子元素，这样会导致"overflow: hidden"不生效。那么这个场景下就得考虑让父容器边框范围收缩（让子元素边框超过父容器边框）。
margin-bottom取负值就可以让子元素盒子实际占用尺寸减少（content+padding+border+margin），但又不会影响到子元素边框（content+padding+border）。对应父容器内部被占用的空间减少，父容器边框范围收缩，"overflow: hidden"就可以生效了。（margin不会影响子元素边框，通过影响子元素实际占用尺寸来影响父容器边框）
这个等高布局涉及的知识点还是挺多的，比如"overflow: hidden"何时触发、内外边距对盒子的影响、盒子未显式设置高度时的处理。
-
- 起跑中
- 2020-09-12 15:18:29
overflow的hidden会把超出的值隐藏，padding-bottom把内部间距撑开，当元素的内容填入时，两列就会被撑开，所以在视觉上看到的，是等高的，高度是以内容多的那列为准，但是查看dom元素的时候，两列的内容区域是不一样的
一课全面掌握主流CSS布局
5276 学习 · 60 问题
相似问题