37

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

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

这是我的代码：

#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是可见的，但由于某种原因隐藏了它overflow-x: hidden。#schools-container

4

2 回答 2

4

您制作两个 div（具有绝对位置）的方式使溢出规则无效！

您需要更改位置类型（正常/非绝对），我建议使用浮动，最后，您要应用溢出的容器 div 需要有一种适合它的方法，例如在末尾放置一个 div clear: both（在使用浮点数的情况下）。

编辑：我刚刚尝试过，您可以按照上面的建议隐藏第二个 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/

于 2012-05-03T17:41:38.950 回答
-1

我想你需要这个

#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;
}

您还需要定义主 div 的高度。

于 2012-05-03T17:49:38.960 回答