Я ищу решение.У меня есть страница в стиле CSS.Страница генерируется с помощью Rails.Макет содержит div id="wrapper для фиксированной ширины сайта и margin: 0 auto.
Подробная информация о моей проблеме:
Есть раздел заголовка, раздел навигации и контейнер (и ок. Нижний колонтитул).Контейнер имеет две колонки.Содержание и правая сторона бара.
Хорошо, я начинаю генерировать динамические вещи в области содержимого.Эта страница о прогнозах.У меня есть карты Таро в спреде, после чего каждая карта зацикливается снова, чтобы получить объяснение значения карт.
Распространение в верхней части области содержимого:
div#spread_box {
width:620px;
background-color:#392b3f;
margin: 15px 15px 10px 10px;
display:block;
overflow:auto;
position:relative;
clear:both;}
У меня есть изображения, которые я хочу разместить в одном месте, поэтому я использую абсолютное позиционирование.
div#spread_box img {border: 1px solid #000000; display: block; height: 120px; position: absolute; width: 71px;}
div#spread_box #kelta1 {left: 115px; top:168px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); z-index: 500;}
div#spread_box #kelta2 {left: 115px; top:168px;}
div#spread_box #kelta3 {left: 115px; top:45px;}
div#spread_box #kelta4 {left: 115px; top:291px;}
div#spread_box #kelta5 {left: 20px; top:168px;}
div#spread_box #kelta6 {left: 210px; top:168px;}
div#spread_box #kelta7 {left: 310px; top:395px;}
div#spread_box #kelta8 {left: 310px; top:270px;}
div#spread_box #kelta9 {left: 310px; top:145px;}
div#spread_box #kelta10 {left: 310px; top:20px;}
Это поле распространения. Как вы можете видеть, я использовал технику позиционирования, чтобы получить это в нужном месте. Чем идет сгенерированный Rails контентный контент.Каждый блок имеет class="card_detail".В этом есть 3 вещи: короткий текст в <p>, который детализирует позицию.Под этим в двух столбцах изображение карты и пояснения к ней.
Поскольку это контент, сгенерированный базой данных, я использовал технику float.
div.explanation_box { width:600px; background-color:#392b3f; border: 1px solid #000; margin: 15px 15px 10px 10px; text-align:justify; padding: 10px; overflow:auto;}
div.explanation_box p { width:475px; }
div.explanation_pos { margin:5px; display:block;}
div.explanation_pos p { width:575px; }
div.explanation_card { width:100px; float:left;}
div.explanation_img { margin:5px; width:100px; float:left;}
div.explanation_pos img { width:100px; }
Существует контейнерный ящик объяснения_box с фиксированными width и overflow:auto собственность.Поле объяснения находится в обычном рабочем процессе, включая элементы с плавающей точкой.
Симптомы моей проблемы
Если я даю точное значение height:600px; в spread_box (элемент контейнера), чем все в порядке.Однако, если я покажу одну и только одну карту, тогда будет огромная неиспользованная область.
Если я уберу параметр высоты распределительной коробки, то все это исчезнет!
И Если селектор overflow:auto удален, то плавающие элементы поднимаются вверх, под элементы с абсолютным позиционированием.
Если я использую переполнение авто и высоту исправления с размером пикселя меньше, чем отображаемое содержимое, то с правой стороны будет ползунок, и содержимое будет обрезано.
Вопрос наконец-то
Итак, как мне сделать, чтобы spread_box имел динамическую высоту, включающую фиксированный позиционный спред?
Содержимое spread_box зависит от ФОРМЫ, которая отправляет данные.Таким образом, может быть все от одной карты до действительно сложного спреда.Вот почему мне это нужно!