Javascript - расширение div, чтобы оно соответствовало содержимому, но не расширялось за пределы контейнера. - PullRequest
Новая
       29

Javascript - расширение div, чтобы оно соответствовало содержимому, но не расширялось за пределы контейнера.

1 голос
/ 12 июля 2011

Возможно ли это сделать с помощью CSS? Учитывая следующий HTML: 

<div class="main-container">
    <div class="left">
        ...
    </div>
    <div class="right">
        <div class="top">
            ...
        </div>
        <div class="bottom">
            dynamic content
        </div>
    </div>
</div>

Я хочу bottom для прокрутки, если она переполняет пространство между верхом и низом main-container.

Как это можно сделать без указания высоты bottom?

Я бы предпочел не указывать высоту для других элементов, если это возможно. Это не прямо сейчас, но top может также иметь динамическое содержимое.

Приведенный выше HTML-код может быть изменен при необходимости; мне нужен конечный результат левого столбца, правого столбца и нижней части прокрутки правого столбца, если его контекст превышает доступное пространство в главном контейнере.

Ответы [ 2 ]

0 голосов
/ 13 июля 2011

Надеюсь, это то, что вы ищете: 

<div class="main-container">
    <div class="left" style="float: left; width:33%">
        ...
    </div>
    <div class="right" style="float: right; width:66%">
        <div class="top" style="height: auto;">
            ...
        </div>
        <div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
            dynamic content
        </div>
    </div>
</div>
0 голосов
/ 13 июля 2011

В конце вам придется указать какие-то ограничения (либо height, либо max-height) для ваших элементов, чтобы узнать, выходит ли контент за них.

Как только вы настроите эти размеры, overflow:auto; покажет вам полосы прокрутки, когда они вам понадобятся.

...