Overflow-x: скрытый также скрывает вертикальный контент тоже

У меня есть DIV размером 400 пикселей шириной, содержащий два DIVs бок о бок, каждый с шириной 400 пикселей и высотой 600 пикселей. Ширина обоих DIVs фиксирована, однако высота может меняться. Я бы хотел скрыть второй 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>

Ответ 1

Как вы сделали два div (с абсолютной позицией), лишайте правила переполнения!

Вам нужно изменить тип позиции (до нормального/не абсолютного), и я предлагаю использовать поплавки, наконец, контейнерный div, для которого вы хотите применить переполнение, должен иметь способ подгонки, например, поместить div в конец с clear: both (в случае использования поплавков).

EDIT: я просто попробовал, и вы можете скрыть второй div, следуя верхнему предложению и добавив еще один окружающий div внутри с очень большой шириной и изменив overflow-x на overflow для главного контейнера 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 в конце):

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

Ответ 2

Я думаю, вам нужно это

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