가짜 열이없는 2 열 CSS 레이아웃

이 문제에 대한 일반적인 해결책은 가짜 레이아웃이라는 것을 알고 있지만, 사이드 바를 확장해야하는 그림자가있는 섹션이 있기 때문에 저에게는 효과가 없습니다. 이 문제에 대한 새로운 해결 방법이 있습니까? 이 콘텐츠 섹션을 항상 #main의 100 %로 설정하여 사이드 바가 그 아래로 확장되지 않도록하겠습니다.가짜 열이없는 2 열 CSS 레이아웃

전체 HTML/CSS를 포함 시켰습니다.

<html> 

<head> 
    <title>Test</title> 

    <style type="text/css" media="screen"> 
     * { 
      margin:0; 
      padding: 0; 
     } 
     body { 
      background: #ccc; 
     } 
     #content { 
      width: 900px; 
      margin: 50px auto; 
      background: #fff; 
     } 
     #main { 
      overflow: hidden; 
     } 
     #sidebar { 
      width: 180px; 
      float: left; 
     } 
     #sidebar li { 
      padding: 10px; 
      border-bottom: 1px #ccc solid; 
     } 
     #main-content { 
      -moz-box-shadow: 0 0 25px rgba(0, 0, 0, .5); 
      -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); 
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); 
      float: left; 
      width: 700px; 
      padding: 10px 
     } 


    </style> 

</head> 

<body> 

    <div id="content"> 
     <div id="main"> 
      <div id="sidebar"> 
       <ul> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
       </ul> 
      </div> 
      <div id="main-content">I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.</div> 
     </div> 
    </div> 

</body> 
</html>

출처

2012-06-06 Brenden

이, 나를 위해 jsfiddle에 넣고 다음은

는 작업 데모입니다. – cha0site

사이드 바가 콘텐츠보다 길거나 콘텐츠가 사이드 바보다 길 수 있는지 궁금합니다. 가짜 컬럼이 어떻게 작동하지 않을지를 시각화하지는 않습니다. 2 개의 배경 이미지가 필요하기 때문에 항상 다른 DIV 래퍼를 hm으로 추가 할 수 있습니다. CSS3에는 괜찮은 지원 (http://caniuse.com/#search=multiple backgrounds)처럼 보이는 여러 배경 이미지가 있습니다. – jmbertucci

당신은 이것에 대한 jQuery를 사용할 수 있습니다 :

이 래퍼의 내부에, 당신은 두 개의 부동 div의 아래에있는 두 개의 부동 div의 배치 - - 여전히 래퍼의 내부에 다음 줄에 플로트를 죽일

$("#main-content").height($("#sidebar").height() - 20);

-20은 적용한 패딩입니다. http://jsfiddle.net/rniestroj/DEVha/ 내가 게으른

출처

2012-06-06 21:41:37

훌륭한 접근 방식. 감사! – Brenden

배경 이미지로 div 래퍼를 설정할 수 있습니다.

이

<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>

출처

2012-06-06 21:38:48

가짜 열이없는 2 열 CSS 레이아웃

답변

관련 문제