Создавайте настраиваемый виджет размера с помощью CSS

0

Мы разрабатываем настраиваемый виджет высоты с 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/. Любое другое решение более элегантно?

благодаря

  • 0
    Я обновил свой ответ с помощью примера jQuery Script, чтобы получить правильную высоту.
  • 0
    Еще раз спасибо за ваш ответ, я стараюсь избегать использования Javascript.
Теги:

1 ответ

0

Просто дайте элементу #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);

Рабочий скрипт

Поделиться
  • 0
    Спасибо за ваш ответ, но, как я объяснил, я не могу использовать абсолютный размер (без px) внутри содержимого виджета. Идея состоит в том, что содержимое соответствует размеру de, определенному виджетом, любого размера.
  • 0
    Тогда используйте мое второе решение с #content overflow:hidden . Нет необходимости в абсолютном размере.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню