div # 2 child, подстраивающийся под доступное вертикальное пространство, в зависимости от роста ребенка # 1 - PullRequest
0 голосов
/ 07 марта 2011

Я хотел бы сделать следующее с HTML5 / CSS3 (полное соответствие браузеру было бы неплохо, но не совсем необходимо - пока я тестирую с Firefox 4b12, Safari и Chrome):

У меня есть следующая структура HTML:

<div id=contentwrapper>
  <aside>  
   <div id=child1></div>
   <div id=child2></div>
  </aside>
  (<div id=maincontent></div>)
</div>

Я хочу сделать следующее:

contentwrapper имеет фиксированную позицию, верхняя 20, нижняя 20px (= использовать все пространство между фиксированным верхним и нижним колонтитулами).

в стороне установлен на 100% высоты (используйте все пространство обертки содержимого!)

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

child2 также имеет переменное содержимое. но я хочу, чтобы этот div использовал все доступное вертикальное пространство, которое осталось внутри, и которое не занято child1. Если его контенту требуется больше места, возникает переполнение: автоматически, если необходимо создать полосу прокрутки.

За всем столбцом следует основная область содержимого, которая всплывает справа. это не должно относиться к моей проблеме.

что я пробовал до сих пор:

Я не могу установить высоту child2 на авто или на 100%, или на фиксированное значение (может быть большим, без полосы прокрутки, не знаю высоту окна пользователя, ...).

Я не могу использовать значения position: fixed и top + bottom, так как это не смотрит на child1, но отрисовывает относительно aside.

Я не могу использовать display: table, поскольку элементы имеют границы / форматирование, которые не применяются к ячейкам таблицы.

Я надеюсь, что вы понимаете проблему, и, возможно, есть разумное решение ...

Редактировать: вот скриншот моей проблемы:

http://www.gestaltungssache.at/stuff/beschreibungproblem.png

В представлении 1 вы можете видеть, что происходит в тот момент, когда область просмотра достаточно высока.

В представлении 2 недостаточно места, и child2 опускается под нижний колонтитул ...

я хотел бы, чтобы child2 брал все, что может получить в высоте, но прокручивал его содержимое.

спасибо за вашу помощь

1041 * Себастиан *

1 Ответ

0 голосов
/ 07 марта 2011

Если вы установите для child1 значение float:left и child2 для height:100% и оба значения для width:100% Я думаю, что это достигнет желаемого эффекта.

Что-то вроде это ?

...