2列布局，第一列固定宽度，100％高度，第二列100％宽度和高度

Question

我已经设法完成这与display:table-cell，但我遇到了问题，实施masonry.js到table-cell ，它只是不起作用。

所以我必须用普通的div来做到这一点。

我需要左栏的宽度为40px，并且高度随内容增长。主列需要宽度为100%或动态占用剩余空间。

Rigth现在我有这个，它在结构上工作，但不与masonry.js。
CSS

div#wrapper{ 
display:table; 
height:100%; 
width:100%; 
} 
div#sidebarWrapper{ 
display:table-cell; 
min-width:40px; 
height:100%; 
background-color:#444; 
} 
div#contentWrapper{ 
display:table-cell; 
height:100%; 
position:relative; 
} 
div#content{ 
border-left:1px solid #ddd; 
border-top:1px solid #ddd; 
overflow:hidden; 
padding-bottom:100px; 
margin-top:195px; 
} 
div.clear{clear:both;} 

HTML

<div id="wrapper"> 
     <div id="sidebarWrapper"> 
      </div> <!-- sidebar wrapper --> 

      <div id="contentWrapper"> 
      <div id="content"> 
      </div><!-- content--> 
      <div class="clear"></div> 
      </div><!-- wrapper wrapper --> 
     </div><!-- site wrapper --> 

基本上我需要的这里面作品版本，而表。非常感谢。

Answer 1

我认为你需要第二列是流体所以..

Demo（产地另一个演示，overflow: hidden;不是必需的子元素）

我想你不会需要任何解释这里一切都是自我解释，从您的情况下不需要的子元素中删除overflow: hidden;。

<div class="wrapper"> 
    <div class="left_container">Hello</div> 
    <div class="right_container">World this is just a random junk text</div> 
</div> 

html, body { 
    height: 100%; 
} 

.wrapper { 
    height: 100%; 
} 

.left_container { 
    float: left; 
    width: 200px; 
    background: #f00; 
    min-height: 100%; 
} 

.right_container { 
    min-height: 100%; 
    background: #000; 
    margin-left: 200px; 
    color: #f00; 
} 

注：如果有合适的一个超过视height这不会展开左侧列，在这种情况下，我们一般使用display: table;一个纯CSS解决方案，但你已经排除了这种可能性的第一个地方，所以你可以选择jQuery ..或者你可以在容器上使用overflow-y: auto;，你认为这个容器可能会超过视口height。

$(function(){ 
    $(window).resize(function(){ 
     var documentHeight = $(document).height(); 
     $('.left_container').css('height',documentHeight + 'px'); 
    }).resize();  
}); 

Demo 2（有内容）

编辑：Mr.Alien有正确的想法，我只是做了小调整:)

jQuery(function($){ 
    $(window).resize(function(){ 
     var containerHeight = $('.right_container').height(); 
     $('.left_container').css('height',containerHeight + 'px'); 
    }).resize();  
});