如何删除溢出引起的滚动条？

Question

当我将导航栏固定位置的 overflow-x 设置为隐藏时，是否可以删除第二个小滚动条？

图片link:Right Here!~

这是我的代码：

HTML:

<div id="main-style">
<nav>
    <img src="images/logo_3.png">
    <ul>
        <li><a href="#">Home</a></li><!--
        --><li><a href="#">About</a></li><!--
        --><li><a href="#">Contact</a></li><!--
        --><li><a href="#">Menu</a></li>
    </ul>
</nav>

CSS:

    body {
  margin: 0;
  width: 100%;

  html, body {
  position: relative;
  overflow-x: hidden;
  height: 100%;
   }

  *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

*{
    margin: 0;
    padding: 0;
    }

    #main-style{
        width: 100%;
        position: fixed;
        z-index: 5; /*The Highest Index*/
    }

    nav{
        width: 100%;
        height: 60px;
        display: block;
        overflow-x: hidden;
    }

nav ul li{
    list-style-type: none;
    display: inline-block;
}

我当前使用 chrome

注意：

导航栏中所有元素的高度都正确设置为60px。 希望你能帮帮我here.Thanks很多！

Answer 1

在 CSS 中 nav，将 overflow-x: hidden; 替换为 overflow-y: hidden;。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

Answer 2

我最近通过将 html,body 更改为：

来解决此问题

  overflow-y: visible;

并将 nav 更改为：

     overflow-y: hidden;

希望这对你和我都有帮助 >:D

如何删除溢出引起的滚动条？

How To remove Scrollbar cause by Overflow?

html

css

overflow

scrollbar

navbar