我有一个宽度为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
而被隐藏。