オーバーフローが見えるときのCSSの背景のディフェンピング

Question

私は次の基本的な構造を持つサイトを持っています。このサイトの背景は白で、画像は一度現れますが、代わりにCSSのhtml{ }宣言の色を継承します。背景を持つべき要素の下にあるすべての要素は透明です。背景が追加されていても（Firebugでチェックされていても）、これはhtml{ }で定義されている背景の下にあるようです。

これは、overflow: none;を#content-containerから削除して以来発生しています。以前はそれが機能していました。しかし、私はこれを削除する必要があります。サイトに発生している変更は、ナビゲーションメニューにドロップダウンが必要なので、下のコンテナはオーバーフローを許可する必要があります。

これが起こっている特定のCSSの理由はありますか？それとも誰かが助けることができるように私が提供する必要があるものは何ですか？ありがとう。

<div id="main-container"> 

    <div id="header-container"> 
     <div id="header-top"> 
      {Code} 
     </div> 

     <div id="header-middle"> 
      {Code} 
     </div> 

     <div id="header-nav"> 
      {Code}   
     </div> 
    </div> 

    <div id="content-container"> 
     <div id="content-left" class="index"> 
      {Code} 
     </div> 

     <div id="content-right"> 
      {Code} 
     </div> 
    </div> 

    <div id="footer-container"> 
     {Code} 
    </div> 

</div> 

Answer 1

私は#content-leftと#content-right要素が浮いていることを推測していますか？この場合、#content-containerのoverflow: noneは、要素をセルフクリアにしていました。これがなければ、要素はその中のすべての要素が浮動しているので高さを持たないので、コンテナの高さを計算することはできません。

あなたがoverflow: visibleを使用する必要がある場合は、この問題を回避するには、それにclear: bothセットで含む要素の最後にdivを配置することです：

<div id="content-container"> 
    <div id="content-left" class="index"> 
     {Code} 
    </div> 

    <div id="content-right"> 
     {Code} 
    </div> 

    <div class="clear"></div> 
</div> 

.clear { clear: both; }