出现两个滚动条的解决方式
页面出现两个滚动条为什么会出现两个滚动条？当页面的内容高度大于屏幕（视口）的高度的时候就会出现外侧滚动条解决：不给定父元素高度以及取消overflow：hidden为了兼容响应式 背景一直都为设定背景 可以将背景设置在html标签中 注意的是：此时就不能加scoped属性了overflow外边距（margin）的折叠父子元素相邻外边距，子元素的margin会传递到父元素上（上外边距）初步解决：不让
·
页面出现两个滚动条
- 为什么会出现两个滚动条？
当页面的内容高度大于屏幕（视口）的高度的时候就会出现外侧滚动条
解决：不给定父元素高度以及取消overflow：hidden
为了兼容响应式 背景一直都为设定背景 可以将背景设置在html标签中 注意的是：此时就不能加scoped属性了
引申出的两个问题
- 一个是关于overflow属性的设置对滚动条的影响
- 另一个是html标签和body标签的区别与联系
1.overflow
设置的是内容溢出了元素框之外的处理
注意这里是内容 而不是子元素
比如p标签中的文字溢出
question
疑问：那么子元素溢出父元素也所作这种溢出情况嘛？
实践得出：
当然的啦 如下图
//设置的样式
<style>
*{
margin: 0;
padding: 0;
}
.box1{
overflow-y: scroll;
width: 300px;
height: 90px;
background-color:antiquewhite;
}
.son{
height: 300px;
width: 50%;
background-color: yellowgreen;
}
</style>
<body>
<div class="box1">
<div class="son">
我是子元素呀
</div>
</div>
</body>
关于overflow的属性有下面几个：
另外也可以分别设置x y轴：overflow-x 和 overflow-y
2.html标签和body标签
首先呢明确两个规则：
- 父元素在不指定高度的情况下呢，父元素的高度是由子元素撑起来的 body和html标签也同样
- 其次，在设置子元素百分比 百分比需要向上找到给定的父元素高度才可以 ，如果向上父元素是默认高度auto那么则不起作用（相互依赖：父元素依照子元素撑高，子元素又根据父元素的百分比显示则出现矛盾）
1.当设置了html标签的高度100% 后面body和div就有了依赖
2.背景颜色
html标签有背景 优先充当浏览器的背景
若没有 则选择body标签作为浏览器的背景
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)