Overflow-x：hidden也隐藏垂直内容

Question

我有一个400px宽的DIV，包含两个并排的DIV，每个DIV的宽度为400px，高度为600px。两个DIV的宽度是固定的，但是高度可以变化。我希望隐藏第二个DIV，并完整地显示第一个DIV，在DIV中不滚动。

#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隐藏了它。

Answer 1

你让两个div（有一个绝对位置）无效溢出规则的方式！

您需要更改位置类型（为正常/不是绝对），我建议使用浮动，最后，您想要应用溢出的容器div需要有一种方法来适应它，比如在末尾放置一个div并清除:both（在使用浮动的情况下）。

Edit：我刚刚试过了，您可以按照上面的建议隐藏第二个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这里：http://JsFiddle.net/mbmac/