html - 2列布局，第一列固定宽度，100%高度，第二列100%宽度和高度

Question

我已经设法用 display:table-cell 完成了这个，但是我遇到了一个问题，将 ma​​sonry.js 实现到一个 table-单元格，它只是不起作用。

所以我必须对普通的 div 执行此操作。

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

现在我有了这个，它在结构上有效，但不适用于 ma​​sonry.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 (做了另一个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;
}

注意:如果右侧列超过视口(viewport)高度，则不会扩展左侧列，在这种情况下我们通常使用display: table; 来实现纯CSS解决方案，但您已经首先排除了这一点，因此您可以选择 jQuery.. 或者您可以在您认为可能超过视口(viewport) height< 的容器上使用 overflow-y: auto;/.

$(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();    
});