オーバーフローを設定する：親に隠れてすべてのコンテンツを非表示にする

Question

divの "カルーセル"を持つサイトを設定しようとしていますが、すべてサイドバイサイド（左に浮動）で、フルスクリーンの幅で表示されます。 javascriptを使用して、私は "カルーセル"を動かすことによって異なるdivをビューに移動することを計画しています。

私の問題は、オーバーフローを設定する何らかの理由で、カルーセルを含むdivに隠されているすべてのコンテンツが隠されていることです。火かき棒で調べると、divが正しい場所に表示されますが、コンテンツは表示されません。私はオーバーフローを取る場合

#content_window 
{ 
    position:relative; 
width:100%; 
overflow:hidden; 
} 

#carousel 
{ 
    position:absolute; 
    width:400%; 
    top:50px; 
    left:0; 
    overflow:hidden; 
} 

.pane 
{ 
    float:left; 
    width:25%; 
    color:White; 
    text-align:left; 
    margin-top:50px; 
} 

：#content_windowのオフに隠された、その後のペイン内のコンテンツが見えるようになりますが、水平スクロールバーがある

<div id="content_window"> 
    <div id="carousel"> 
     <div id="p_home" class="pane"> 
      Home! 
     </div> 
     <div id="p_about" class="pane"> 
      About! 
     </div> 
     <div id="p_services" class="pane"> 
      Services! 
     </div> 
     <div id="p_contact" class="pane"> 
      Contact! 
     </div> 
    </div> 
</div> 

とCSS：ここ

はHTMLですスクロールしてすべての枠を表示することができます。誰かが私が間違っていることを知っていますか？

Answer 1

第三ペインがmargin-left: -200%;である、等...たとえば、ここペイン2でありますdivには浮動要素または配置要素以外は何も含まれていません。その高さは0になります。はdiv＃content_windowの問題です。そのdiv要素に高さを追加してみてください：

#content_window 
{ 
height: 120px; 
} 

Answer 2

絶対配置を使用する必要は全くありません。 content_windowにカルーセルのビューポートをクリップさせるだけです。 http://jsbin.com/uhubij/edit#htmlを参照してください。

CSSは、はるかに簡単です：

#content_window { 
    width:100%; 
    overflow:hidden; 
} 

#carousel { 
    width:400%; 
} 

.pane { 
    float:left; 
    width:25%; 
    text-align:left; 
    margin-top:50px; 
} 

#carouselにmargin-leftを追加し、ペインを切り替えるには。最初のペインはmargin-left: 0%（デフォルト）です。 2番目のペインはmargin-left: -100%;です。 （私はあなたのためにクリアdiv要素を追加した以外）http://jsbin.com/uhubij/2/edit#html

HTMLは基本的に同じである：

<div id="content_window"> 
    <div id="carousel"> 
     <div id="p_home" class="pane"> 
      Home! 
     </div> 
     <div id="p_about" class="pane"> 
      About! 
     </div> 
     <div id="p_services" class="pane"> 
      Services! 
     </div> 
     <div id="p_contact" class="pane"> 
      Contact! 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</div>