Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






#1 14.11.2010 11:53

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Как растянуть блок по всей высоты СТРАНИЦЫ

Хочу блокировать содержимое страницы. Для этого делаю видимым полупрозрачный слой. Проблема в том, что бы этот слоф растнуть по всей длине СТРАНИЦЫ, а не видимой части окна. Пишу что-то по типу

Код:

....
....

Ничего не получается. Думал, что смысл в том, что боди растянется в зависимости от содержимого, а с помощью конструкции position: absolute; top: 0px; right: 0px, bottom; 0px; left: 0px; я прижму слой к краям области содержимого страницы.
Где я туплю?

Нет на форуме

 

#2 15.11.2010 16:53

CountZero
Новичок
Зарегистрирован: 22.05.2010
Сообщений: 39

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

По порядку:

1.) * {margin:0; padding:0;}
2.) html, body {height:100%; width:100%;}

Третьим пунктом следует задание твоему горемычному слою height:100%;

Это все.

ЗЫ: Когда у тебя значение чего-то равно нулю, не пиши еденицы типа 0px, background-color тоже дурной тон, пиши просто background.
Пока все.

Нет на форуме

 

#3 16.11.2010 12:08

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Вы можете сказать, исходя из каких соображений вы даете подобные рекомендации?

Код:

      

Отрабатывает в Лисе и Опере. Не могу понять, почему.
Насчет рекомендаций. В RFC не нашел, что background-color - depricate, и насчет едениц измерения где-то читал, что еденицы измерения указываются всегда.
Я плохо разбираюсь в CSS, хотелось бы разбираться чуть больше - поэтому задаю такие вопросы - хочу большего понимания, а не тупо Ctrl+C Ctrl+V.

Нет на форуме

 

#4 16.11.2010 12:21

CountZero
Новичок
Зарегистрирован: 22.05.2010
Сообщений: 39

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Я не совсем понял, чего вы хотите сделать то?
Касательно нуля, нольи в Африке ноль, так что не заморачивайтесь. И вообще, как писали на вебмасконе "все стандарты сосут".

Нет на форуме

 

#5 16.11.2010 14:09

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

CountZero написал:

Я не совсем понял, чего вы хотите сделать то?

Хочу накрыть дивом всю страницу. Хочу понять, что неправильно в приведенных примерах.

CountZero написал:

И вообще, как писали на вебмасконе "все стандарты сосут"

Нет, ну все ж так плохо :-)))

P.S. Нашел пример в jquery. Буду смотреть, как там реализовано, но хотелось бы понять, где я ошибься в моих вариантах.

Нет на форуме

 

#6 16.11.2010 14:22

tapazukk
Опытный
Зарегистрирован: 16.01.2010
Сообщений: 349
Вебсайт

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

4matic, читайте статьи на сайте "как прижать футер к низу"   и исследование о поведенииbody

Нет на форуме

 

#7 16.11.2010 14:56

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Спасибо!
Хм, ходил же по этому сайту, как я не заметил про БОДИ....
Т.е. ответом на мой вопрос, в чем я не прав будет "все стандарты сосут" и выводы из статьи про БОДИ.
Еще раз спасибо.

Нет на форуме

 

#8 16.11.2010 19:04

alemiks
Опытный
Откуда: Voronezh
Зарегистрирован: 09.04.2010
Сообщений: 256
Вебсайт

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

CountZero написал:

как писали на вебмасконе "все стандарты сосут".

ссылку плиз, а то я видно пропустил...

Нет на форуме

 

#9 16.11.2010 19:22

CountZero
Новичок
Зарегистрирован: 22.05.2010
Сообщений: 39

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Сори, я перепутал вебмаскон с другим сайтом, вот здесь

Нет на форуме

 

#10 07.12.2010 14:28

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

И снова о баранах.
Ну, не получается у меня организовать перекрытие страницы чистыми средставми CSS.
Пробывал поработать с fixed - тоже не получается работа в IE. Как я понял из гугиления ИЕ до 7-й версии имеет ввиду position:fixed. ДИВ смещает текст вниз, хотя, по идее блок должен идти вне потока...

Отредактированно 4matic (07.12.2010 14:51)

Нет на форуме

 

#11 08.12.2010 02:08

cds
Новичок
Зарегистрирован: 07.12.2010
Сообщений: 10

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Для

1.) * {margin:0; padding:0;}
2.) html, body {height:100%; width:100%;}
3.) .over {position: absolute;top:0;left:0;height:100%; width:100%;}

в теле

родной контент
Ваш див


все

Нет на форуме

 

#12 08.12.2010 10:42

4matic
Новичок
Зарегистрирован: 14.11.2010
Сообщений: 6

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

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

Нет на форуме

 

#13 08.12.2010 12:56

cds
Новичок
Зарегистрирован: 07.12.2010
Сообщений: 10

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Тогда меняй:

1.) * {margin:0; padding:0;}
2.) html, body {height:100%; width:100%;}
3.) .over {position: absolute;top:0;left:0;height:100%; width:100%;overflow:scroll;z-index:300;}
4.) .first {height:100%; width:100%;overflow:hidden;z-index:300;}

И добавь в первый див следующее:

в теле

родной контент
Ваш див


все

Нет на форуме

 

#14 08.12.2010 12:59

cds
Новичок
Зарегистрирован: 07.12.2010
Сообщений: 10

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

Глянь сайт в теме /forum/viewtopic.php?id=406
У меня там как раз реализована 100% высота для клиента (то есть прокрутка хоть и в нужном месте, но не для body, а для дива).

Нет на форуме

 

#15 09.07.2012 20:18

psy-del
Новичок
Зарегистрирован: 07.09.2011
Сообщений: 2

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

а за html, body { height:100%; width:100%; } спасибо, юзал всегда

#splash { position:absolute;
left: expression( ( leftVar = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft )  + 'px' );
top: expression( ( topVar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )  + 'px' );
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
filter:alpha(opacity=70);
}
#splash_out{position:absolute; z-index:9999999;
left: expression( ( leftVar = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft )  + 'px' );
top: expression( ( topVar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )  + 'px' );
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
}

Нет на форуме

 

#16 08.07.2014 07:07

roman_mak
Новичок
Зарегистрирован: 08.07.2014
Сообщений: 1

Re: Как растянуть блок по всей высоты СТРАНИЦЫ

У меня получилось так
html, body {width:100%, height:100%}

---------------------------------------------------

Нужный блок


---------------------------------------------------

mozilla 3.6.3, ie 8 стали растягивать любой включенный контент по высоте вместе с бэкграундом

Нет на форуме

 

Board footer