Форум hotibo.ru

lynxeye · #1 11.01.2011 12:29

Есть макет
http://good-mountain-bike-gloves.com/!tmp

Header, left: float fixed 200px, content: margin left 200px fluid 100%, footer: clear both 100%.

Необходимо чтобы вся страница растягивалась на 100% по вертикали, даже если мало текста.
Указываю html,body {height:100%}

Как вообще поступать в таких случаях. Сайт должен быть полностью на дивах.
Надеюсь на вашу помошь.

Аня · #2 11.01.2011 20:36

http://webtest.chebykin.ru/articles/footer/

Glook · #3 26.01.2011 00:06

как говорится "o'k, wow!"

Glook · #4 26.01.2011 00:12

цитата:-------------------------------
Чтобы достичь желаемого, наиболее прямой путь — сделать подвал абсолютно позиционированным (position: absolute) по отношению к элементу body. (Хотелось бы, конечно, по отношению к html, но тогда не выполнится второе требование. Сами догадайтесь, почему.) Соответственно, сам элемент body для этого также придётся сделать позиционированным, причём относительно (position: relative). Опять же, догадайтесь сами, почему не absolute.-----------------------------------------

Я новичок, я не огадался. и почему же?

Аня · #5 29.01.2011 21:55

Действительно, как ты мог не догадаться :-) Почему же-почему же?

Glook · #6 01.02.2011 20:12

ну хорошо, всё замечательно в этом варианте, пока....
пока не появляется float если например в общем слое создать ещё два и спозиционировать их посредством float? то в MF и Opera всё летит к чертям... Footer отклеивается от нижнего края окна и налезает на слой.

Аня · #7 01.02.2011 20:18

Ну ты код клади, будем смотреть :-)

Glook · #8 01.02.2011 20:44

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

Код:


Footer Нижний колонтитул


  Content for  id "header" Goes Here

в один из блоков left или right вставить побольше текста, чтобы он по высоте был больше окна

Аня · #9 01.02.2011 22:25

Хм...честно говоря, я не знаю, как бороться с флоатами, кроме как их убрать. Делается это простым рабоче-крестьянским методом В. Шандыбина под названием хак. Ознакомиться с описанием метода можно здесь: http://webtest.chebykin.ru/articles/sophistication
Правда, еще лучше воспользоваться условными комментариями.
Однако, я не смотрела в IE7 по причине отсутствия оного. Очень советую посмотреть и там.
Если узнаю о другом методе, обязательно сообщу.

Footer Нижний колонтитул

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текекст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div

Отредактированно Аня (01.02.2011 22:53)

Glook · #10 01.02.2011 23:40

Аня написал:

Правда, еще лучше воспользоваться условными комментариями.

это как?

Аня · #11 02.02.2011 00:07

Это сделать то же самое, только отделить стили при помощи условного комментария для IE. С выходом каждого нового браузера никто не может гарантировать рабоспособность хаков. А вот условные комментарии с этой точки зрения надежнее.

Glook · #12 02.02.2011 05:08

Аня, я всё равно не понял, как это выглядит, покажи, пожалуйста.

vashurin · #13 02.02.2011 09:31

Glook, смотрите здесь: http://msdn.microsoft.com/workshop/auth … nt_ovw.asp

Аня · #14 02.02.2011 09:35

Эта таблица стилей будет работать только в IE всех версий:

Эта таблица стилей будет работать только в IE6 и всех его подверсиях (правда, их нет ):

Эта таблица стилей будет работать только в IE6 и более ранних версиях IE:

Эта таблица стилей будет работать только в IE7 и всех его подверсиях, если таковые будут:

Форум hotibo.ru

#1 11.01.2011 12:29

height 100% --- HELP

#2 11.01.2011 20:36

Re: height 100% --- HELP

#3 26.01.2011 00:06

Re: height 100% --- HELP

#4 26.01.2011 00:12

Re: height 100% --- HELP

#5 29.01.2011 21:55

Re: height 100% --- HELP

#6 01.02.2011 20:12

Re: height 100% --- HELP

#7 01.02.2011 20:18

Re: height 100% --- HELP

#8 01.02.2011 20:44

Re: height 100% --- HELP

Код:

#9 01.02.2011 22:25

Re: height 100% --- HELP

#10 01.02.2011 23:40

Re: height 100% --- HELP

Аня написал:

#11 02.02.2011 00:07

Re: height 100% --- HELP

#12 02.02.2011 05:08

Re: height 100% --- HELP

#13 02.02.2011 09:31

Re: height 100% --- HELP

#14 02.02.2011 09:35

Re: height 100% --- HELP

Board footer