分析问题
在页面布局时,我们经常会设置html,body的height为100%,让处于最外面的父级元素刚好充满整个屏幕高度,但是,如果此时body下面第一个子元素,刚好设置了margin-top的值,你会发现页面出现了竖向滚动条,问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条,似乎这个margin-top是添加到了父容器上。
例子:假如一个页面有一个列表,第一个子元素需要保持和最顶部有一些上边距,于是你设置了这个子元素margin-top:20px,这个子元素的高度并没有超过父元素的高度,但是整个页面出现了竖向滚动条
原因:
如果两个相邻元素没有border或者padding进行分割,那么会发生外边距合并的现象,并且合并后的外边距以相邻元素中较大的外边距为最终结果
demo
<!DOCTYPE html>
<html>
<head>
<title>子元素设置margin-top导致出现滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.child {
margin-top: 20px;
height: 200px;
background-color: #DDD;
}
</style>
</head>
<body>
<div class="child"></div>
</body>
</html>
上面的代码表示,两个相邻元素:body元素和class为child的div元素,body元素没有border或者padding与其相邻元素进行分割,所以这个相邻元素的margin-top值会被合并到body上,最终导致原本高度为100%的body元素多出20px的上边距,于是出现了竖向滚动条
解决办法
- 给父元素添加padding或者border值或者把margin-top改成padding-top(最简单)
此时应该注意:父元素盒模型的模式应该改变为:box-sizing: border-box; 以免导致竖向或横向多出设置的值
html,body {
height: 100%;
padding: 1px;
border: 1px solid transparent;
/* 或者是添加 padding: 1px*/
box-sizing: border-box; /*注意改变盒子模型*/
}
.child {
margin-top: 20px;
height: 200px;
background-color: #DDD;
}
- 在第一个子元素前面添加占位元素
<!DOCTYPE html>
<html>
<head>
<title>子元素设置margin-top导致出现滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.child {
height: 200px;
background-color: #DDD;
}
.space {
height: 20px;
}
</style>
</head>
<body>
<div class="space"></div>
<div class="child"></div>
</body>
</html>
- 如果不考虑此页面包含的是一个列表或者有很多子元素的情况,可以使用绝对定位让该子元素脱离文档流
需要注是:在拥有多个子元素的情况下,如果第一个子元素脱离了文档流,那么第二个子元素就相当于第一个子元素了,也就是说:如果第二个子元素设置了margin-top的值,那么还是会导致这个问题的出现
.child {
height: 200px;
background-color: #DDD;
width: 100%;
position: absolute;
top: 20px;
}
- 还是跟第3点的前提一样,如果不考虑此页面包含的是一个列表或者有很多子元素的情况,设置父元素的overflow-y: hidden;
html,body {
height: 100%;
overflow-y: hidden;
}
.child {
height: 200px;
background-color: #DDD;
margin-top: 20px;
}