Question

我的问题是，当我定义overflow-x:hidden时，它会创建一个不需要的滚动条。

我正在尝试实现与此question类似的功能。

我尝试过那里建议的解决方案但是没有用。以下是我的代码：

CSS和HTML：

＆＃13;

.wrapper {
  margin-top: 50px;
}

.menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow-x: hidden;
}


.submenu {
  background: #E0E0E0;
  height: 100px;
  width: 50px;
}

.menu_list {
  width: 300px;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="menu_container">
      <div class="menu_list" align="left">
        Menu 1 Menu2 Menu 3
      </div>
      <div class="submenu">
        sub
      </div>
    </div>
  </div>
</body>

＆＃13;

以下是JSFiddle链接。

Answer 1

我看到了实现目标的两种方法：

<强> 1。将 .menu_container 的高度设置为 auto

HTML保持不变，这是CSS：

.wrapper {
margin-top: 50px;
}

.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: auto; /* NEW */
overflow-x:hidden;
}

.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
display: none; /* I added this to show the effect when .submenu is invoked */
}

.menu_container:hover .submenu {
display: block; /* I added this to show the effect when .submenu is invoked */
}

.menu_list {
width: 300px;
}

将鼠标悬停在 .menu_container 上：FIDDLE

此解决方案将使.menu_container增长，因此当显示 .submenu 时，其他内容将被按下。

<强> 2。在单独的DIV中包裹 .submenu 并将其定位为绝对

使用此方法，.menu_container不会增长，因此以下内容会保持原样。

HTML：

<body>
 <div class="wrapper">
  <div class="submenu_container"> <!-- NEW -->
   <div class="menu_container">
    <div class="menu_list" align="left">
     Menu 1 Menu2 Menu 3
    </div>
   </div>
   <div class="submenu">
    sub
   </div>
  </div>
 </div>
</body>

CSS：

  .wrapper {
   margin-top: 50px;
  }

  .menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow: hidden;
  }

  .submenu_container { /* NEW */
  position: relative;
  }

 .submenu {
 background: #E0E0E0;
 height: 100px;
 width: 50px;
 position: absolute; /* NEW */
 left: 20px; /* Adjust to your needs */
 top: 40px; /* Adjust to your needs */
 }

 .menu_list {
 width: 300px;
 }

请参阅FIDDLE

Answer 2

您也可以在CSS中添加html {overflow-y:hidden}或添加html {height:100%;}以删除y滚动条（或者至少我认为您想要完成的内容）。

添加html {overflow-y:hidden}会与overflow-x完全相同，但会删除y滚动条。这可能对您要完成的任务有用，但其缺点是隐藏了超过浏览器100％高度的所有内容。

将html {height:100%;}添加到您的CSS会告诉浏览器该网页正好是浏览器大小的100％。这将向内移动所有内容，使其适合页面上的所有内容（除非定位由像素而不是百分比定义）。这种方法的缺点是向内推送所有内容可能会在不同的浏览器和大小上给出不同的结果。

总的来说，我说你只需保留滚动条，它会为你节省大量的定位时间，它只会限制你的页面。

溢出x：隐藏导致垂直滚动条

2 个答案: