我们正在使用 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/ .还有其他更优雅的解决方案吗?
谢谢
最佳答案
只需给 #listado
元素一个 230px 的最大高度(#content
高度 - #innerhead
高度),而不是 继承
。
或者:
你可以给#content
一个overflow: hidden
更新:
您可以使用这个简单的 jQuery 脚本根据 #innerHead
元素的高度调整 #listado
最大高度。
var contentHeight = $('#content').outerHeight();
var innerHeadHeight = $('#innerHead').outerHeight();
var maxHeight = contentHeight - innerHeadHeight;
$('#listado').css('max-height', maxHeight);
关于html - 使用 CSS 设计可定制的尺寸小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22151799/