Overflow-x：hiddenも垂直方向のコンテンツを隠す

Question

幅400ピクセル、高さ600ピクセルの2つのDIVを横に並べたDIVの幅は400ピクセルです。両方のDIVの幅は固定されていますが、高さは変わります。私は2番目のDIVを隠して、DIVの中にスクロールしないで最初のものを完全に表示したいと思います。

私の解決策は、オーバーフローxを隠すことでした。これはあまりにもオーバーフローを隠すように思われる。

#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でoverflow-x: hiddenはそれを隠し：

は、ここに私のコードです。

Answer 1

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

ポジションのタイプを変更する必要があります（絶対/絶対ではない）。フロートを使用することをお勧めします。最後に、オーバーフローを適用するコンテナdivにdivを配置するなどの方法が必要です最後はclear: both（浮動小数点使用の場合）です。

編集：私はそれを試したところで、上の提案に従い、内側のdivを非常に大きな幅で内側に追加し、メインコンテナdivのoverflow-xをoverflowに変更することで2番目の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/

このよう

Answer 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; 
} 

メインディビジョンの高さも定義する必要があります。