auto для height и width

[Nanto]

Как обсчитывается?

[Justnewone]

Для блочных элементов - по максимально возможному по ширине и минимально возможному по высоте

Для строчных - по минимально возможному по ширине, высота не применяется.

[Nanto]

а в каких случаях "width:auto" имеет смысл, если у блока уже проставлены min-width и max-width? не очень понимаю такой вид конструкций...

а) Это хак для некоторых браузеров

б) Чтобы ширина блока всегда растягивалась до максимума (но ведь по дефолту так и должно быть)

в) Не имеет смысла

[Justnewone]

если указано width:что-то-там, то min-width и max-width не имют смысла. Может, такая модицикация, "вот в этом месте надо отпустить ширину и сделать вилку"

[Nanto]

Ну как же - если указано "width:auto", то min-width и max-width будут служить границами возможных значений для "auto", не?

[Justnewone]

да, именно так я и написал, нет разве? auto это то же самое, что "просто не указывали", с помощью auto можно привести в дефольт много параметров. Вдруг, я непонятно написал, поясню width:что-то-там, здесь "что-то-там" нечто целочисленное или процентное, любое отличное от дефольта

[Nanto]

Ну хорошо? а вот тут можете мне объяснить (имеется в виду правила для body) - что как работает, и почему именно в таком порядке? (это типа "кроссбраузерный блок на всю высоту страницы")

html{

height:100%;

}

body{

position:relative;

height:auto !important;

height:100%;

min-height:100%;

}

#div{

position:absolute;

width:100%;

height:100%;

}

Edited November 25, 2011 by Nanto

[Justnewone]

вот так должно быть:

body{
position:relative;
height:100%;
height:auto !important;
min-height:100%;
}

height:auto !important; - эта строчка хак для осла точнее эта строчка отделяет осла от всех остальных браузеров, ИЕ6 не понимает !important и min-height, его height работает как min-height

а первй блок

html{
height:100%;
}

вообще не нужен ОЧень нужен и полезен я по невнимательности увидел body вместо html

Дайте адрес статьи, где Вы нашли этот код

[Gaspode]

ИЕ6 не понимает !important

Щито? Наглая ложь. Nanto правильный порядок указал.

IE6 из двух одинаковых правил в пределах селектора выбирает последнее, не взирая на !important.

Edited November 25, 2011 by Gaspode

[Justnewone]

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

[Nanto]

Ну то есть можно сказать - не понимает! Суть-то использования !important как раз и состоит в переопределении специфичности селектора (в смысле правила), разве не так?

мне в том примере не понятно другое:

1) html, body{ height:100%} - это понятно - растягиваем документ на всю СТРАНИЦУ (если не задавать html? а только body - то вроде растягивается только на высоту ОКНА - не помню точно, может и не во всех браузерах так)

2) position:relative для body - не понятно! блок (с position:absolute) внутри body и так будет позиционирован относительно body по умолчанию. Или это какой-то финт всё-таки?

3) для 6-го осла ставим height:auto. Вопрос - а зачем надо выделять шестого осла? зачем вообще нужен этот "height:auto"?

почему не так:

height:100%; (это фактически min-height для IE6)

min-height:100%; (а это для всех остальных)

Вернее даже так - height:100%;

Зачем ещё min-height указывать?

Вроде здесь когда-то нашёл:

http://xhtml.ru/2005/10/18/footer-stick/

А тут оказывается целая диссертация по этой проблеме расписана - попробую въехать:

http://xhtml.ru/2005/12/12/body_height_research/

Edited November 25, 2011 by Nanto

[Justnewone]

1. Да, растягиваем. Если не задать для html 100%, боди не растянется на высоту окна, боди вообще не растягивается, если его только контент не заставит

2. Релейтив - не знаю, очень редко его использую, только как родитель абсолюта. Почему тут у body - мне не ведомо.

3. Для шестого осла надо как раз height:100%, а для всех остальных - height:auto. Поясню почему. Контент, который, допустим, может переполнить страницу, не потянет в высоту за собой элемент, если оному записано 100%, то есть, он из него вывалится и пойдет дальше, если нет футера, все белое - это не проблема, конечно, но если имеем прижатый футер - будет не айс. В ИЕ6 немного иначе, если мы не напишем оверфлоу:хидден, то контент потянет в высоту блок с указанной высотой в 100%

Тут на сайте тоже полно "футеров, прижатых к низу", там только такая схема.