компоновка жидкости css с переполнением div внутри

Question

У меня проблемы с компоновкой CSS с элементом div.

В основном мой макет главной страницы выглядит следующим образом:

Красное поле - это область экрана браузера. Черный ящик - это область содержимого, в которую будут включены / загружены данные через ajax. Зеленое поле - это список данных, который является результатом ответа и содержит около ста строк внутри. Список данных содержит заголовок div и строки div.

То, что я намерен сделать, это установить переполнение в синей области, являющейся строками данных, чтобы полоса прокрутки отображалась справа от синего поля, а не справа от красного или черного поля. Затем при изменении размера области браузера (красного цвета) все элементы div внутри также будут изменены до наилучшего размера.

Мне удалось заставить полосу прокрутки появляться на синем поле, когда данные внутри переполнены, установив css overflow: auto / scroll для синего поля div. Но проблема заключается в переполнении: автоматические свойства, кажется, работают только тогда, когда я устанавливаю определенную высоту для синего блока div, скажем, около 400 пикселей. Когда я изменяю размер браузера, синий блок div остается с высотой 400px.

Как сделать так, чтобы оно автоматически меняло размеры? Заранее спасибо за любую помощь.

Answer 1

Вам необходимо зафиксировать высоту заголовка, «строки заголовка таблицы», нижнего колонтитула и строки «нижнего колонтитула»

оттуда вы можете рассчитать смещения верхнего и нижнего положения для среднего поля, которое должнобудьте абсолютно позиционированы, потому что он позиционирован, вам также нужно будет абсолютно позиционировать два нижних колонтитула, в моем примере я обернул их в два ряда и позиционировал их как один, это может показаться излишним, но на самом деле многие ваши контейнерыбольше не требуются (хотя я их не отсеивал)

также ваш код с плавающей точкой является слишком избыточным, вам не нужно относительно позиционировать каждый элемент с плавающей точкой влево: 0,0%, поэтому я вырубил все их,вам нужно только относительное позиционирование top, если вы хотите сделать абсолютное позиционирование внутри него ... за исключением элемента body, который является всем, что нам нужно использовать для этого макета стиля (заметьте, я немного изменил конец вашего HTML)

refiddle: ЗДЕСЬ

и, кстати, я думаю, что эти внутренние ряды будутЯ был бы лучше как фактический <table>, мне кажется, что это строки данных;) - и все это, вероятно, означало бы намного меньше кода ..

Answer 2

То, что вы ищете, это позиционированный div для синей рамки.

.blueboxdiv{
   position: relative;
   top     : 100px; // height of header - Top stays 100px away from header thus grows on resize!
   bottom  : 0px;   // Bottom sticks to bottom
   left    : 0px;   // Left sticks to left
   right   : 0px;   // Right sticks to right
}