[分享]css两个滚动条重复

在使用CSS样式创建网站时，有时可能会出现两个滚动条的情况。这种情况往往会让网站的外观看起来有些奇怪，同时还会影响用户的浏览体验。那么，我们该如何解决这个问题呢？其实，引起两个滚动条问题的根本原因是内...

在使用CSS样式创建网站时，有时可能会出现两个滚动条的情况。这种情况往往会让网站的外观看起来有些奇怪，同时还会影响用户的浏览体验。那么，我们该如何解决这个问题呢？

其实，引起两个滚动条问题的根本原因是内部内容的高度超出了外部容器的高度。我们可以在CSS中设置overflow属性，将它的值设置为“auto”，表示在需要时自动添加滚动条。但是，这种方法可能会导致两个滚动条的出现。

.container{
    height: 500px;
    overflow: auto;
} 

要解决这个问题，我们可以通过给外部容器添加box-sizing属性，将其值设置为“border-box”。这样，我们设置的高度就会包括内容、内边距和边框的整体大小，避免了内部内容高度超出外部容器高度的情况。这样就可以保证不会出现两个滚动条。

.container{
    height: 500px;
    overflow: auto;
    box-sizing: border-box;
} 

综上所述，如果要解决CSS样式下出现的两个滚动条问题，只需要给外部容器添加box-sizing属性，将其值设置为“border-box”即可。