CSS Растяжение боковой панели до 100% страницы.Разрывается, когда размер окна изменяется или содержимое слишком велико - PullRequest
0 голосов
/ 18 марта 2012

Бороться с этим уже как минимум пару часов.Пробовал поискать, но, похоже, решение не работает.Так или иначе, у меня есть шаблон, над которым я работаю, и проблема, с которой я столкнулся, заключается в том, что боковая панель слева просто не растянется до конца!Если окно развернуто, оно выглядит совершенно нормально.Как только вы измените размер окна, оно будет разбито, оставляя большой разрыв между боковой панелью и нижним колонтитулом.Он также ломается, если содержимое выходит на страницу больше, чем в настоящее время ...

Убедитесь сами здесь: http://bakedcraft.ca/laboratory/testsites/crock/template.html

и css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css

Есть идеи?

Ответы [ 3 ]

0 голосов
/ 19 марта 2012

Извините, это не совсем ответ, но он не позволяет мне написать комментарий ...

Я посмотрел ваш код в Firebug (Firefox + дополнение для веб-разработчика), и он показывает окноограничение 467px высота Я пытался быстро найти, откуда эти 467px, но не могу увидеть это с быстрым взглядом (сейчас 4 часа утра).Он наследует эту высоту откуда-то, скорее всего, из комбинации других ограничений размера связанных элементов.Со всеми позициями, которые вы выполняете, может быть трудно определить местоположение.

Одно из предложений, которое я имею, состоит в том, что если вы планируете создать гибкий макет, вам следует работать с em, а не с прямыми пикселями.Как я уже сказал, это не ответ, но я заметил ограничение размера вашей боковой панели.Если эта проблема все еще открыта утром, я посмотрю, смогу ли я лучше рассмотреть ее для вас.

0 голосов
/ 19 марта 2012

Хорошо, я проверил твою проблему в голове и думаю, что понял.Простите, потому что я набираю это на своем телефоне и не могу использовать firebug, чтобы проверить, прав я или нет, но ограничение, которое я заметил ранее для 467px, не наследуется от другого контейнера, оно содержится в тексте вбоковая панельЕсли вы добавите больше текста, поле будет расти вместе с ним.Я верю, что вы, возможно, захотите сделать, чтобы сделать ребенка conatiner внутри div боковой панели.Ваш основной div боковой панели будет содержать только серый цвет фона серый.Создайте дочерний div внутри div боковой панели и поместите в него текст и изображения.Удостоверьтесь, что в родительском div вы делаете его высотой 100%Высота элементов внутри дочернего элемента div не должна требовать указания высоты, поскольку они будут унаследованы от родительского элемента div на боковой панели.Надеюсь, это имеет смысл.

Вы можете сделать исправление, упомянутое ранее, с помощью jquery, но помните, что если кто-то закроет свой JavaScript, ваша проблема останется, и ваша страница сломается.Вы должны попытаться найти и устранить основную причину, а не использовать бинты, которые можно снять.

0 голосов
/ 18 марта 2012

Добавьте position:relative к вашему классу .main

прямо сейчас ваша боковая панель на 100% больше высоты окна, а не основного контейнера.добавив позицию: относительно родителя боковой панели, когда боковая панель имеет высоту 100%, она становится 100% от основного деления.

...