出现两个滚动条的解决方式

最新推荐文章于 2025-10-22 14:51:54 发布

原创最新推荐文章于 2025-10-22 14:51:54 发布 · 1.4w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

自我成长类专栏收录该内容

4 篇文章

订阅专栏

本文探讨了网页中出现两个滚动条的原因，指出当内容超过视口高度时会出现滚动条，并提供了解决方案。同时，解释了overflow属性对滚动条的影响，通过实例展示了子元素溢出父元素的情况。此外，还详细阐述了html和body标签的区别，强调了它们在设定高度和背景颜色时的角色。最后，提到了设置html和body标签高度100%的依赖关系及其对背景颜色的影响。

文章目录

- 页面出现两个滚动条
- - 1.overflow
  - 2.html标签和body标签

页面出现两个滚动条

为什么会出现两个滚动条？
当页面的内容高度大于屏幕（视口）的高度的时候就会出现外侧滚动条
解决：不给定父元素高度以及取消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标签

参考文章1
参考文章2

首先呢明确两个规则：

父元素在不指定高度的情况下呢，父元素的高度是由子元素撑起来的 body和html标签也同样
其次，在设置子元素百分比百分比需要向上找到给定的父元素高度才可以，如果向上父元素是默认高度auto那么则不起作用（相互依赖：父元素依照子元素撑高，子元素又根据父元素的百分比显示则出现矛盾）

1.当设置了html标签的高度100% 后面body和div就有了依赖

2.背景颜色
html标签有背景优先充当浏览器的背景
若没有则选择body标签作为浏览器的背景
在这里插入图片描述