html - 使用 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-->

内部的 Head div 弄乱了结构。我需要一种方法来执行此操作，允许我在不设置小部件内容的任何绝对大小的情况下绘制或不绘制滚动条，从而使内容适合小部件的容器。

请注意，当内部头部 ddiv 不存在时，当前结构工作正常。但是当 inner Head 存在时我无法让它工作。

不能使用 position:fixed 因为主页面也有滚动。

更新:

我最好的方法是制作一个与#innerHead 高度相同的空div，然后插入到#listado 中。这里的例子 http://jsfiddle.net/W6zz2/ .还有其他更优雅的解决方案吗？

谢谢

Answer 1

只需给 #listado 元素一个 230px 的最大高度(#content 高度 - #innerhead 高度)，而不是 继承。

Working Fiddle

或者:

你可以给#content一个overflow: hidden

Working Fiddle

更新:

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

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

Working Fiddle