Question

当我缩小浏览器窗口时，我需要一个水平滚动条显示在我的网站上。当我放{overflow-x:auto;}时，即使浏览器最大化，我也会立即获得一个滚动条，并且我的右侧有100像素的空白空间。

body {
    padding: 0;
    margin: 0;
}
    .container {
        font-size: 0;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        bottom: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }

Answer 1

尝试使用此

body {
 padding:0;
 margin:0;
 }
 .container {
 font-size: 0;
 height: 100%;
 width: 100%;
 position: fixed;
 top: 0px;
 bottom: 0;
 overflow-y:scroll;
 margin-right: -10px;
 overflow-x:hidden;
 } `

如果您仍然遇到任何问题。您可以分享小提琴链接，我可以检查并为您提供更准确的解决方案。

Answer 2

如果您只想在需要时显示滚动条，那么您需要使用overflow：auto，如需更多参考，请查看here。

页面的结构非常混乱，所以我不会去修复结构，但会提供答案，让我得到水平条显示。

问题出在div＃navbar子元素中。以及使用边距和填充属性的方式。有关如何使用它们的一些信息，请查看here。

div＃ctu元素的margin-left属性处于活动状态，它将元素扩展到其继承的大小之外。

#ctu{
    margin-left:20px --> padding-left:20px;
}
#ft{
    position:absolute; ---> position:relative;
    padding-left:10px --> padding-left:0px;
}
.container{
     overflow-y: scroll;  ---> overflow-y:auto;
     overflow-x: hidden !important; overflow-y:auto;
  //OR
  overflow:auto;
}

CSS水平滚动条未显示，或右侧有空白区域

2 个答案: