37

幅 400 ピクセルの DIV があり、それぞれ幅 400 ピクセル、高さ 600 ピクセルの 2 つの DIV が並んでいます。両方の DIV の幅は固定されていますが、高さは変更できます。DIV 内をスクロールせずに、2 番目の 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;
}
<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

4

2 に答える 2

4

2 つの div を (絶対位置で) 作成した方法は、オーバーフロー ルールを無効にします!

位置タイプを (通常/絶対ではなく) 変更する必要があります。最後に、フロートを使用することをお勧めします。clear: both（フロートを使用する場合）。

EDIT：私はちょうどそれを試してみました.2番目のdivを非表示にするには、上の提案に従い、内部に非常に大きな幅の別の周囲のdivを追加し、メインコンテナdivのを変更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/

于 2012-05-03T17:41:38.950 に答える
-1

これが必要だと思います

#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の高さも定義する必要があります。

于 2012-05-03T17:49:38.960 に答える