| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > 100% высота для div-а |
| Автор: sssergius 25.10.2007, 12:06 |
| Как сделать для div-а 100%-ную высоту я уже знаю. Но вот столкнулся с еще одной проблемой, что в нутри этого дива, растянутого на 100% нельзя растянуть на 100% еще один див Или все же можно? Если кто знает, подскажите |
| Автор: sssergius 25.10.2007, 12:55 |
| Чтобы было понятно о чем идет речь можно посмотреть ссылку http://lizart.by/sergej/s01/ Нужно чтобы слева и справа центрального блока были бордюры. Но проблема в том, что не могу растянуть эти бордюры на всю высоту. |
| Автор: WebDisaster 25.10.2007, 15:22 |
| А не проще ли обойтись без нагромождения блоков и "положить" фоновый цвет (и, если есть, рисунок) в body {background: ...} |
| Автор: sssergius 25.10.2007, 18:05 |
| Привет, Шустрый. Проблема в том, что бордюры слева и справа разные. Добавлено через 1 минуту и 18 секунд А еще лучше глянь, что получается на макете. Фоновый рисунок и так есть |
| Автор: WebDisaster 25.10.2007, 18:18 |
| Вообще-то я смотрел. Либо я не понимаю, что есть "бордюры", либо никакой разницы (справа и слева) не заметил. Можно ли на макете как-то отметить, что такое "бордюр"? Чтобы было понятно даже тем, кто и в танке и в каске. |
| Автор: Castro 25.10.2007, 23:56 |
| А какой смысл вкладывать 2 дива абсолютно одинаковых. Если нужен фон, то нету смысла извращаться созданием дива перекрывающего всю область экрана-гораздо проще присвоить фон <body>. Бордюр, в простонародии бордер, - это рамка.Тоесть квадрат с красной кайомкой, это и есть бордер. А у вас что есть бордер? |
| Автор: sssergius 26.10.2007, 14:04 |
| Объясняю подробнее. Есть фоновая заливка для body - у меня она неоднородная темно-красная. Это общий фон, который появляется слева и справа от сайта, когда размер экрана больше 1024 Сам сайт - красный Справа и слева красного сайта есть бордюры (называйте как хотите), которые можно было бы сделать как border, но проблема в том, что они разные и делаются через вставку картинок. На примере я зафиксировал высоту правого бордюра в 100px, а левый в 100% Растяжка в 100% работает только в IE, а в других браузерах левого бордюра вообще нет Как можно реализовать такой макет?? |
| Автор: SelenIT 26.10.2007, 20:24 |
| Насколько я вижу, ширина центрального блока фиксирована? Тогда можно сделать для него background-image на всю ширину, нарисовать в нем по краям эти разные графические border-ы и размножить по высоте. А чтоб внутренние блоки не наезжали на них - задать им соотв. боковые margin-ы. |
| Автор: artuska 9.11.2007, 10:36 | ||
| Значит так, sssergius, ни с одним доктайпом вы не сделаете внутри div'a, растянутого на 100% по высоте, еще один нормальный див, тоже растянутый на 100% по высоте. Почему я говорю "нормальный" див? См. пример: Создаю обычный HTML-документ со следующими элементами (доктайп у меня жесткий, не переходный):
И все у меня прикольно! Растянулись 2 дива по высоте на 100% один в другом! Клева! (задайте, например, внутреннему диву высоту 90% и бэкграунд и увидите, что реально все растягивается) А вот теперь берем, и внутреннему div'у задаем margin:10px; или padding:10px; - и все, жопа, блоки начинают растягивать страницу, появляются скроллинги и тд и тп. Дальше. Если мы перед этими div'ами поставим еще один див, и, допустим ему высоту зададим 50px, то опять у нас появится вертикальный скроллинг высотой ровно 50px. В принципе, дивы не предназначены для растяжки на 100% ((( - по крайней мере, ни в одном браузере они не ведут себя нормально. Посмотрите на любую страничку, сверстанную в дивах - она не растянута по высоте на 100% - страницу тянет вниз контент - уберете контент, а страничка-то и не растянута на 100% окажется. Так что самый оптимальный вариант - это сделать таблицами, без доктайпа. ЗЫ. Да, и кстати, не делай боковые бордеры трех-, четырех-, пятицветными - откажись от них и сделай обычный бордер border: 1px solid #9e1800; |
| Автор: vlad275 21.2.2012, 17:52 |
| Извините, за некропостинг, но сейчас столкнулся с тем, что height:100% * html form body #container не работает. Проверял в Хроме и IE9 - не доходит до низа экрана :-( Не пойму где я накосячил. http://77.105.164.89/ Не могли бы вы подсказать простое решение? |