使用CSS设计可自定义的大小小部件

Question

我们正在设计一个可定制的CSS高度小部件，以用于我们的Backbone/Marionette应用程序。我们创建以下结构：

<!--WIdget Component (Layout View)--> 
<div style="width:30%"> 
    <div id="Title" style="background-color: #0b64f9;color:#ffffff">Title Of the Widget</div> 
    <div id="content" style="max-height: 250px;border:1px solid black;"> 
     <!--WIdget Content (ItemView distinct from Widget's Component)--> 
      <div id="innerHead" style="background-color: coral;padding-left: 10px;padding-right: 10px;"> 
        Inner Head 

      </div> 
      <div id="listado" style="overflow:auto;max-height:inherit;margin-bottom: 15px"> 
      <ul style="margin-top:0px"> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 
       <li>Content Of the Widgett</li> 

      </ul> 
     </div> 
     <!-- end of widget Content--> 
    </div> 

</div> 
<!-- end of widget Component--> 

内部头部div正在搞乱结构。我需要一种方法来做到这一点，使我可以绘制滚动或不设置任何绝对的大小在小部件的内容，使内容适合在小部件的容器。

请注意，当内部头部不存在时，当前结构可以正常工作。但是，当内部头脑出现时，我不能使它工作。

无法使用position：fixed，因为主页面也滚动。

UPDATE：

我已经得到了最好的是做一个空div与#innerHead相同的高度，并插入到#listado。示例在这里http://jsfiddle.net/W6zz2/。任何其他解决方案更优雅？

感谢

Answer 1

只要给#listado元素230px的最大高度（#content高度 - #innerhead高度），而不是inherit。

Working Fiddle

OR：

你可以给#content的overflow: hidden

Working Fiddle

UPDATE：

你可以使用这个简单的jQuery脚本调整#listado最大高度取决于0的高度元素。

var contentHeight = $('#content').outerHeight(); 
var innerHeadHeight = $('#innerHead').outerHeight(); 
var maxHeight = contentHeight - innerHeadHeight; 
$('#listado').css('max-height', maxHeight); 

Working Fiddle