Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> 100% высота для div-а 
:(
    Опции темы
sssergius
Дата 25.10.2007, 12:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет



Как сделать для div-а 100%-ную высоту я уже знаю.
Но вот столкнулся с еще одной проблемой, что в нутри этого дива, растянутого на 100% нельзя растянуть  на 100% еще один див

Или все же можно?
Если кто знает, подскажите
 
PM MAIL   Вверх
sssergius
Дата 25.10.2007, 12:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет



Чтобы было понятно о чем идет речь можно посмотреть ссылку http://lizart.by/sergej/s01/

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


PM MAIL   Вверх
WebDisaster
Дата 25.10.2007, 15:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



А не проще ли обойтись без нагромождения блоков и "положить" фоновый цвет (и, если есть, рисунок) в body {background: ...}
PM MAIL   Вверх
sssergius
Дата 25.10.2007, 18:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет



Привет, Шустрый.

Проблема в том, что бордюры слева и справа разные.

Добавлено через 1 минуту и 18 секунд
А еще лучше глянь, что получается на макете.
Фоновый рисунок и так есть
PM MAIL   Вверх
WebDisaster
Дата 25.10.2007, 18:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



Вообще-то я смотрел. Либо я не понимаю, что есть "бордюры", либо никакой разницы (справа и слева) не заметил. Можно ли на макете как-то отметить, что такое "бордюр"? Чтобы было понятно даже тем, кто и в танке и в каске.
PM MAIL   Вверх
Castro
Дата 25.10.2007, 23:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: 3
Всего: 5



А какой смысл вкладывать 2 дива абсолютно одинаковых.
Если нужен фон, то нету смысла извращаться созданием дива перекрывающего всю область  экрана-гораздо проще присвоить фон <body>.
Бордюр, в простонародии бордер, - это рамка.Тоесть  квадрат с красной кайомкой,  это и есть бордер. А у вас что есть бордер?


--------------------
user posted image
PM MAIL ICQ GTalk   Вверх
sssergius
Дата 26.10.2007, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 20
Регистрация: 11.10.2006

Репутация: нет
Всего: нет



Объясняю подробнее.

Есть фоновая заливка для body - у меня она неоднородная темно-красная. Это общий фон, который появляется слева и справа от сайта, когда размер экрана больше 1024

Сам сайт - красный
Справа и слева красного сайта есть бордюры (называйте как хотите), которые можно было бы сделать как border, но проблема в том, что они разные и делаются через вставку картинок.

На примере я зафиксировал высоту правого бордюра в 100px, а левый в 100%

Растяжка в 100% работает только в IE, а в других браузерах левого бордюра вообще нет


Как можно реализовать такой макет??

PM MAIL   Вверх
SelenIT
Дата 26.10.2007, 20:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Насколько я вижу, ширина центрального блока фиксирована? Тогда можно сделать для него background-image на всю ширину, нарисовать в нем по краям эти разные графические border-ы и размножить по высоте. А чтоб внутренние блоки не наезжали на них - задать им соотв. боковые margin-ы.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
artuska
Дата 9.11.2007, 10:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет



Значит так, sssergius, ни с одним доктайпом вы не сделаете внутри div'a, растянутого на 100% по высоте, еще один нормальный див, тоже растянутый на 100% по высоте.

Почему я говорю "нормальный" див? См. пример:

Создаю обычный HTML-документ со следующими элементами (доктайп у меня жесткий, не переходный):

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<div style="height:100%;">
   <div style="height:100%;">&nbsp;</div>
</div>


И все у меня прикольно! Растянулись 2 дива по высоте на 100% один в другом! Клева! (задайте, например, внутреннему диву высоту 90% и бэкграунд и увидите, что реально все растягивается)

А вот теперь берем, и внутреннему div'у задаем margin:10px; или padding:10px; - и все, жопа, блоки начинают растягивать страницу, появляются скроллинги и тд и тп.

Дальше.
Если мы перед этими div'ами поставим еще один див, и, допустим ему высоту зададим 50px, то опять у нас появится вертикальный скроллинг высотой ровно 50px.

В принципе, дивы не предназначены для растяжки на 100% ((( - по крайней мере, ни в одном браузере они не ведут себя нормально. Посмотрите на любую страничку, сверстанную в дивах - она не растянута по высоте на 100% - страницу тянет вниз контент - уберете контент, а страничка-то и не растянута на 100% окажется.

Так что самый оптимальный вариант - это сделать таблицами, без доктайпа.

ЗЫ. Да, и кстати, не делай боковые бордеры трех-, четырех-, пятицветными - откажись от них и сделай обычный бордер border: 1px solid #9e1800;

Это сообщение отредактировал(а) artuska - 9.11.2007, 10:40
PM MAIL   Вверх
vlad275
Дата 21.2.2012, 17:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 485
Регистрация: 20.3.2008

Репутация: нет
Всего: -3



Извините, за некропостинг, но сейчас столкнулся с тем, что height:100%  * html form body #container не работает.
Проверял в Хроме и IE9 - не доходит до низа экрана :-( Не пойму где я накосячил. http://77.105.164.89/
Не могли бы вы подсказать простое решение?



Это сообщение отредактировал(а) vlad275 - 21.2.2012, 17:57


--------------------
Кто, как и зачем запустил этот механизм уничтожения России:
http://rutube.ru/tracks/54915.html?v=e74a9...c7e5d24da5656d8
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0801 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.