分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – Overflow-x：hidden也隐藏垂直内容，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个尺寸为400px宽的DIV,包含两个并排的DIV,每个宽度为400px,高度为600px.两个DIV的宽度是固定的,但是高度可以变化.我想隐藏第二个DIV,并完全展示第一个DIV,而DIV内没有滚动.

我想,我的解决方案是隐藏overflow-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;
}@H_616_7@ 
 <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>@H_616_7@ 
 我希望#学校列表可见,但由于某些原因overflow-x：隐藏在#schools-container中隐藏它.

解决方法

你做两个div(绝对位置)的方式使溢出规则无效！

您需要更改位置类型(正常/不是绝对的),我建议使用浮点数,最后,要应用溢出的容器div,需要有一种方法来适应它,就像最后放置一个div清楚：两者(在使用浮标的情况下).

编辑：我只是尝试了,你可以通过跟随上面的建议隐藏第二个div,并在其中添加一个非常大的宽度,并将overflow-x更改为主容器div的溢出.

喜欢这个：

<div id="schools-container">
  <div id="schools-container-inside">
     <div id="schools-list"> One </div>
     <div id="boards-list"> Two </div>
  </div>
</div>@H_616_7@ 
 然后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;
}@H_616_7@ 
 JsFiddle在这里：http://jsfiddle.net/MbMAc/