Абсолютная высота позиции и нижний элемент - PullRequest
0 голосов
/ 20 июля 2011

У меня есть абсолютный позиционный div, который, конечно, не имеет высоты, поэтому нижние элементы (в иерархии HTML) не имеют правильной позиции на странице.

вот ссылка: [удалено]

Абсолютный позиционированный div находится в # page-wrapper.

Проблема: Мне нужен элемент # red-bottom (body child), идущий вниз страницы.

Я могу дать # page-wrapper (также body child) фиксированную высоту или установить фиксированные поля. Но проблема в том, что этот текст может быть короче или длиннее. Так что высота тоже динамическая.

Так как исправить это для всех случаев (динамический)?

Исправлено с помощью JavaScript.

Ответы [ 2 ]

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

Так как исправить это для всех случаев (динамический)?

У вас есть два варианта:

  • Используйте JavaScript для позиционирования красной полосы.
  • Не используйте абсолютное позиционирование для позиционирования элементов на вашей странице.

Невозможно переместить красную полосу всегда вниз, используя CSS, если количество текста варьируется.

Совершенно возможно достичь того же макета без использования абсолютного позиционирования.

Чтение: http://www.htmldog.com/guides/cssadvanced/layout/

0 голосов
/ 09 июля 2012

Старый вопрос, но хотел опубликовать не-JavaScript-ответ. Используя абсолютный макет и указав атрибуты top / right / bottom / left, действительно возможно создать макеты, которые состоят из заголовков, боковых панелей, основных разделов и нижних колонтитулов без какого-либо JavaScript. Если вы воспользуетесь инструментом онлайн-закладок zootool.com и получите там бесплатный аккаунт, вы увидите живой пример макета, сделанного следующим образом (если вы хотите доказать, что это возможно). Проверьте источник их страницы, вы увидите, что они делают что-то очень похожее на это.

Макет, подобный iTunes, чрезвычайно легко создать, используя только CSS с абсолютным позиционированием. Это также работает для изменения размера экрана, если вы предполагаете, что у вас есть боковая панель, которая всегда будет иметь одинаковую ширину.

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

...