水平滚动条即使在隐藏溢出时也会显示

Question

我在我的网站上遇到了一个问题，即使在我添加overflow-x：隐藏到body，html元素时，水平滚动条总是显示。而不是隐藏滚动条，另一个滚动条垂直添加，现在我有两个垂直滚动条！

发生这种情况是因为我有一个居中导航并添加了将同一导航的子div设置为视口宽度的100％。在Chrome中检查了开发人员工具，并且div正在向右移动一些像素。

无论如何，因为溢出没有工作，我试图改变calc（）函数的值来减去这些像素，但水平滚动条仍然存在。

这里是我的代码：

<div id="container"> 
     <ul class="nav"> 
      <li><a href="index.php">home</a></li> 

      <li> 
       <a href="#">destinations</a> 
       <div>  
       <div class="nav-column">       

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       <div class="nav-column"> 

       </div> 

       </div> 
      </li> 

      <li><a href="#about">about</a></li> 
      <li><a href="#contact">contact</a></li> 
     </ul>   
</div> 

而CSS：

body,html { 
background-color: white; 
border: 0; 
outline: 0; 
margin: 0; 
padding: 0;  
max-width: 100%; 
overflow-x: hidden; 
} 
#container {  
display: block; 
margin: 0 auto; 
text-align: center; 
position: relative; 
width: 100%; 

} 

.nav { 
cursor: default; 
display: inline-block; 
height: 125px; 
position: relative; 
top: 50px; 
width: auto; 


-ms-flex-pack: center; 
-ms-display: -ms-flexbox; 
} 

.nav, 
.nav a, 
.nav ul, 
.nav li, 
.nav div { 
border: none; 
padding: 0; 
margin: 0; 
outline: none; 
} 

.nav a { 
text-decoration: none; 
} 

.nav li { 
list-style: none; 
} 

.nav > li { 

display: block; 
float: left; 
} 

.nav > li > a { 

display: block; 
color: black; 
font-family: 'Oswald', sans-serif; 
font-size: 1.2em; 
font-weight: 500; 
text-transform: uppercase; 
height: 30px; 
padding: 0 20px; 
position: relative; 
z-index: 510; 

-webkit-transition: all .3s ease; 
-moz-transition: all .3s ease; 
-o-transition: all .3s ease; 
-ms-transition: all .3s ease; 
transition: all .3s ease; 
} 

.nav li:hover a { 
background: black; 
color: white; 

} 

.nav > li > div { 
border: 1px solid black; 
display: inline-block; 
color: black; 
position: absolute; 
top: 30px; 
left: calc(-50vw + 50%); 
width: 100vw; 
opacity: 0; 
overflow: hidden; 
visibility: hidden; 

background: white; 
z-index: 500; 

-webkit-transition: all .3s ease .5s; 
-moz-transition: all .3s ease .5s; 
-o-transition: all .3s ease .5s; 
-ms-transition: all .3s ease .5s; 
transition: all .3s ease .5s; 
} 

.nav li:hover > div { 
opacity: .7; 
visibility: visible ; 
overflow: hidden; 
} 

.nav .nav-column { 
background-color: white; 
float: left; 
text-align: left; 
top: -30px; 
padding: 2%; 
position: relative; 
width: 15%; 
} 

.nav .nav-column h3 { 
color: #d1a559; 
font-family: Orator Std, IrisUPC, sans-serif; 
font-weight: 900; 
margin: 20px 0 10px 0; 
text-decoration: underline ; 
} 

.nav .nav-column li { 
padding-left: 0;  
font-family: Palatino linotype, Rockwell; 
} 

.nav .nav-column li a { 
background: white; 
color: black; 
display: block; 

} 

.nav .nav-column li a:hover { 
background: #d1a559; 
color: white; 

-webkit-transition: all .1s ease; 
-moz-transition: all .1s ease; 
-o-transition: all .1s ease; 
-ms-transition: all .1s ease; 
transition: all .1s ease; 
} 

@media (max-width:1420px) { 


.Thumbnails { 
    float: none; 
} 
} 

@media (max-width: 950px) { 
.nav li:hover > div { 
background-color: white; 
opacity: 1; 
} 

.nav .nav-column { 
position: relative; 
width: 20%; 
} 

.nav .nav-column li { 
list-style: none; 
} 
} 

@media (max-width: 700px) { 
.nav li:hover > div { 
background-color: white; 
left: 0; 
opacity: 1; 
width: 100%; 
} 

.nav .nav-column { 
float: none; 
}  
} 

    .colAbout { 
    display: block; 
    float: none; 
    } 

.span_1_of_3 { 
    width: 70%; 
    } 

@media (max-width: 530px) { 
.nav { 
    display: none; 
    text-align: left; 
    height: 150px; 
    top: 0; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    z-index: 999; 
}  

.nav li { 
float: none; 
left: 0; 
} 

.nav li:hover > div { 
opacity: 1; 
top: 113px; 
}  

.nav > li > a { 
border-right: none; 
display: block; 
left: 0;  
}  

/*Div contendo responsive button*/  
#menu { 
border: 1px solid black; 
color: black; 
cursor: pointer; 
display: block; 
font-size: 1.3em; 
left: 0; 
margin: 5%; 
position: relative; 
text-align: center; 
z-index: 540; 
width: 1.4em; 
} 

#container { 
left: 0; 
display: block;  
padding: 0; 
position: relative; 
width: 100%; 
} 

ul { 
width: 100%; 
list-style: none; 
} 
} 

@media (min-width: 530px) { 
#menu { 
display: none; 
}  
} 

And a fiddle example

Answer 1

我有检查文件你的CSS。原因显示滚动，你应该评论2属性css：position：relative; top：34px;

.nav { 
cursor: default; 
display: inline-block; 
height: 125px; 
width: auto; 
-ms-flex-pack: center; 
-ms-display: -ms-flexbox; 

}

Answer 2

如果你只想隐藏滚动条：

#container { 
    overflow: hidden!important; 
}