Мы разрабатываем настраиваемый виджет высоты с 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 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 испортила структуру. Мне нужен способ сделать это, чтобы позволить мне нарисовать прокрутку или нет, не устанавливая абсолютный размер содержимого виджета, чтобы содержимое вписывалось в контейнер виджетов.
Обратите внимание, что текущая структура работает нормально, когда внутренняя глава ddiv не существует. Но я не мог заставить его работать, когда присутствует внутренняя голова.
Нельзя использовать позицию: исправлено, потому что на главной странице также есть прокрутка.
ОБНОВИТЬ:
Лучшее, что у меня есть, это сделать пустой div с той же высотой #innerHead
и вставить в #listado
. Пример здесь http://jsfiddle.net/W6zz2/. Любое другое решение более элегантно?
благодаря
Просто дайте элементу #listado
максимальную высоту 230 пикселей (#content
height - #innerhead
height), а не inherit
.
ИЛИ:
вы можете дать #content
overflow: hidden
ОБНОВИТЬ:
Вы можете использовать этот простой скрипт jQuery для настройки максимальной высоты #listado
зависимости от высоты элемента #innerHead
.
var contentHeight = $('#content').outerHeight();
var innerHeadHeight = $('#innerHead').outerHeight();
var maxHeight = contentHeight - innerHeadHeight;
$('#listado').css('max-height', maxHeight);
#content
overflow:hidden
. Нет необходимости в абсолютном размере.