CSS 배경 오버플로가 보이는 경우 diappearing

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