Overflow-x: hidden也会隐藏垂直内容

Question

我有一个宽度为400像素的DIV，其中包含两个并排的DIV，每个DIV的宽度为400像素，高度为600像素。这两个DIV的宽度是固定的，但高度可以变化。我想隐藏第二个DIV，完全显示第一个DIV，在DIV内部没有滚动。

我的解决方案是隐藏overflow-x。这似乎也隐藏了y溢出。

这是我的代码：

```html

```

#schools-sub-nav {
}
#schools-container {
  width: 400px; /* Set the width of the visible portion of content here */
  background-color: fuchsia;
  position: relative;
  overflow-x: hidden;
}
#schools-list {
  width: 400px; /* Set the width of the visible portion of content here */
  height: 600px; /* Delete the height, let the content define the height */
  background-color: purple;
  position: absolute;
  top: 0;
  left: 0;
}
#boards-list {
  width: 400px; /* Set the width of the visible portion of content here */
  height: 600px; /* Delete the height, let the content define the height */
  background-color: green;
  position: absolute;
  top: 0;
  left: 400px;
}

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div>
<div id="schools-container">
    <div id="schools-list"> One </div>
    <div id="boards-list"> Two </div>
</div>

我期望#schools-list可见，但由于#schools-container中的overflow-x: hidden而被隐藏。

- Olly F

Answer 1

你使用绝对定位的两个div使溢出规则失效了！你需要改变位置类型（改为正常/非绝对），我建议使用浮动，最后，你想要应用溢出的容器div需要有一种适应方式，例如在末尾放置一个带有“clear:both”样式的div（如果使用浮动）。编辑：我刚试过，你可以按照上述建议隐藏第二个div，并在内部添加另一个包围div，并更改主容器div的overflow-x为overflow。像这样：

<div id="schools-container">
  <div id="schools-container-inside">
     <div id="schools-list"> One </div>
     <div id="boards-list"> Two </div>
  </div>
</div>

接下来是 CSS（我已注释原始未使用的 CSS，并在末尾添加了新的 div 类）：

#schools-container {
    width: 400px; /* Set the width of the visible portion of content here */
    background-color: fuchsia;
    position: relative;
    /*overflow-x: hidden;*/
    overflow: hidden;
}
#schools-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    /*
    position: absolute;
    top: 0;
    left: 0;
    */
    float: left;
}
#boards-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: green;
    /*
    position: absolute;
    top: 0;
    left: 400px;
    */
    float: left;
}
#schools-container-inside {
    width: 10000px;
    overflow: hidden;
}

JsFiddle here: http://jsfiddle.net/MbMAc/

- jackJoe

---

嘿，杰克，我不确定我理解了。我认为溢出规则与定位的div很好地配合工作，我可以通过向容器添加高度来测试它。 - Olly F

你需要更改位置类型（改为普通/非绝对定位）。 - Xavier

Answer 2

幸运的是，镇上有个新来的家伙：overflow: clip;可以做到你所描述的事情！

请看下面更新的片段。

写作时，支持度超过> 91%。来源：caniuse。

#schools-sub-nav {
}
#schools-container {
  width: 400px; /* Set the width of the visible portion of content here */
  background-color: fuchsia;
  position: relative;
  overflow-x: clip;
}
#schools-list {
  width: 400px; /* Set the width of the visible portion of content here */
  height: 600px; /* Delete the height, let the content define the height */
  background-color: purple;
  position: absolute;
  top: 0;
  left: 0;
}
#boards-list {
  width: 400px; /* Set the width of the visible portion of content here */
  height: 600px; /* Delete the height, let the content define the height */
  background-color: green;
  position: absolute;
  top: 0;
  left: 400px;
}

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div>
<div id="schools-container">
    <div id="schools-list"> One </div>
    <div id="boards-list"> Two </div>
</div>

- Mathix420

Answer 3

我认为你需要这个

#schools-container {
    width: 400px; /* Set the width of the visible portion of content here */
    background-color: fuchsia;
    position: relative;
    overflow-x: hidden;
    overflow-y:auto;
    height:600px;
}

您需要同样定义主要

的高度。

- jams