Изменение высоты контейнера div с использованием процентов в CSS для отражения содержимого - PullRequest
0 голосов
/ 25 октября 2009

У меня есть следующий код, который имитирует мою проблему. Я хочу стилизовать элементы внутри "контейнера", используя проценты. Поэтому я должен установить div "Container" на высоту 100% (или другое значение), чтобы сделать эту работу. Проблема возникает, когда я хочу, чтобы div "Container" изменил высоту, чтобы отразить содержимое. В приведенном ниже примере я бы хотел, чтобы высота составляла 200% (в этом случае это сработало бы, поскольку я знаю содержимое «Контейнера», но у меня есть сетка данных в реальном случае с различным числом строк). Если я установлю высоту на авто, я не смогу изменить дочерние элементы, используя проценты. Есть ли способ обойти это или я установлен с контейнерами фиксированной высоты?

Спасибо

Rich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<form style="height:100%">
<div id="Container" style="border:solid 5px;min-height:100%;height:100%">
<div style="height:100%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
</div>
</form>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 25 октября 2009

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

0 голосов
/ 26 октября 2009

Если вы поместите div "spacer" в нижней части div контейнера, то div контейнера должен расшириться и сжаться, как содержимое.

@ Ray - если бы веб-дизайн должен был быть основан на таблицах, все остальные вещи не были бы созданы. Есть довольно много вещей, которые вы не получаете с табличным дизайном, которые важны. На ум приходят две вещи: оптимальное соответствие SEO и соответствие Разделу 508.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...