我有一个400px宽的DIV,它包含两个并排的DIV,每个DIV的宽度为400px,高度为600px。两个DIV的宽度是固定的,但高度可以变化。我想要隐藏第二个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
隐藏了它。
答案 0 :(得分:2)
你制作两个div(具有绝对位置)的方式使溢出规则无效!
你需要改变位置类型(正常/非绝对)并且我建议使用浮点数,最后,你想要应用溢出的容器div,需要有一种方法来适应它,就像放置div一样结束clear: both
(在使用浮动的情况下)。
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/
答案 1 :(得分:0)
我认为你需要这个
#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的高度。