Overflow-x：hidden也隐藏垂直内容 [英] Overflow-x: hidden also hides vertical content too

问题描述

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

I have a DIV measuring 400px wide, containing two DIVs side-by-side, each with width of 400px and height of 600px. The width of both DIVs is fixed, however the height can vary. I'd like to hide the second DIV and show the first completely, with no scrolling inside the DIV.

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

My solution, I thought, was to hide the overflow-x. This seems to also hide the y overflow too.

这是我的代码：

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

I expect #schools-list to be visible, but for some reason overflow-x: hidden in #schools-container hides it.

推荐答案

位置）void溢出规则！

The way you made the two divs (with an absolute position) void the overflow rule!

你需要改变位置类型（正常/不是绝对），我建议使用浮动，最后，容器div应用溢出，需要有一种方法来适应它，就像在 clear：both （在使用浮点数的情况下）放置一个div。

You need to change the position type (to normal/not absolute) and I suggest using floats, finally, the container div that you want to apply the overflow, needs to have a way to fit it, like placing a div at the end with clear: both (in the case of using floats).

编辑：我只是尝试它，你可以隐藏第二个div，跟着上面的建议，并添加另一个周围的div里面的非常大的宽度，并更改

I just tried it and you can hide the second div by following the upper suggestion and adding another surrounding div inside with a very large width and change the overflow-x to overflow for the main container div.

像这样：

<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类）：

And then the CSS (I commented the original not used CSS and added the new div class at the end):

#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/

JsFiddle here: http://jsfiddle.net/MbMAc/

这篇关于Overflow-x：hidden也隐藏垂直内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！