Question

我们正在设计一个可定制的高度Widget，用于我们的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-->

内部头部正在搞乱结构。我需要一种方法来做这个，允许我绘制滚动或不滚动，而不在窗口小部件的内容中设置任何绝对大小，使内容适合小部件的容器。

请注意，当内部头部ddiv不存在时，当前结构正常工作。但是当内心头出现时，我无法使其发挥作用。

无法使用位置：已修复，因为主页面也有滚动。

更新：

我得到的最好的方法是制作一个高度为#innerHead的空div，然后插入#listado。这里的示例http://jsfiddle.net/W6zz2/。任何其他解决方案更优雅？

由于

Answer 1

只需为#listado元素指定最大高度为230px（#content高度 - #innerhead高度），而不是inherit。

Working Fiddle

OR：

您可以#content overflow: hidden

Working Fiddle

更新：

您可以使用此简单的jQuery脚本根据#listado元素的高度调整#innerHead最大高度。

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

Working Fiddle

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

1 个答案: