html body 设置heigth 100%,body内元素设置margin-top出滚动条（margin 重叠问题）

小妖666

于 2025-05-11 17:10:17 发布

阅读量344

点赞数 9

文章标签： html git 前端

本文链接：https://blog.csdn.net/weixin_38883338/article/details/147870998

版权

今天在用移动端的时候发现个问题，html,body 设置 height：100% 会出现纵向滚动条

<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<style>
html, body {
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div style="height: 100%;">
    <div style="margin-top: 44px;height: 200px;"></div>
</div>
</body>
</html>

出现原因：

margin 重叠（margin collapse）是指当两个垂直排列的块级元素的 margin 发生重叠时，最终的外边距会取两个 margin 值中的较大者，而不是两个 margin 的和。换句话说，margin 重叠会导致元素之间的实际间距被缩减。

因为子元素设置了 margin-top 且是最大值，所以父子的外边距都是子元素的外边距值了。

解决方法就是触发 BFC

解决方法一：

父元素设置 overflow: hidden; 或是 overflow: auto;

解决方法二：

父元素或子元素设置浮动

float: left

解决方法三：

父元素设置 position: relative;

子元素设置 position: absolute;

解决方法四：

父元素设置 ::before 让父元素和子元素不相临，就不会有外边距重叠问题

.parent::before {
    content: "";
    display: table;
}

或是父子元素间插入一个 display: flex; 的元素，触发 BFC

<span style="display: none"></span>

解决方法五：

父元素使用Flexbox或Grid布局，也可以避免外边距合并的问题。

解决方法六：

为父元素添加边框或内边距‌：通过给父元素添加border-top或padding-top，可以阻止子元素的margin-top与父元素的margin-top合并。

border-top: 0.1px solid red;
或是
padding-top: 0.1px;