问题背景
有个页面父元素的高度被子元素占据了,在页面的起始高度展示不对,导致设置了height: 100%
之后,页面在没有占满的情况下还是出现了滚动条。
调试可看到dom结构如下:
父元素:

子元素:

分析
可以看到是父子元素的边距塌陷(collapsed margins)。一般常见的间距塌陷我们讲的兄弟节点的情况较多。父子节点的边距塌陷定义可在W3C规范中看到。

解决方案
对于这种第一个子元素与父元素margin合并的情况,可以通过下面的方式解决,供参考:
- 父元素设置overflow: auto / hidden; // 形成BFC
- 父元素设置padding: 1px; // 有padding值
参考
- https://css-tricks.com/what-you-should-know-about-collapsing-margins/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
- https://drafts.csswg.org/css2/box.html#x27
作者
admin
发表于
2019-06-27 17:13:12
,添加在分类
css
下
,并被添加「
css
margin
collapse
」标签
,最后修改于
2019-07-09 20:36:37
本博客来自【白杨的博客】, 转载请注明出处,谢谢合作~
Comments
暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~