CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Cколько-то способов min-height

Несколько способов реализации min-height для всех броузеров. Короткий обобщающий пост. Надеюсь все оценили как я изящно избежал цифры в названии поста?=)

Свойство нужное, часто полезное, но в Internet Explorer не работает. Далее способы вразумить синюю букву Е.

1. min-height через height

1. .block {
2. min-height:200px;
3. height:auto !important;
4. height:200px;
5. }

На данный момент, в силу того что ИЕ7 уже поддерживает min-height, два другие способа я привожу скорее как историческую справку и пример интересных приемов.

• оригинальная статья

2. min-height с помощью padding

1. .block{padding-top:200px}
2. .block .inner{margin-top:-200px}

1. .block .inner{padding-top:200px}
2. .block .inner1{margin-top:-200px}

• Подробнее в блоге у Dave Shea

3. min-height с помощью expression

До того как вышла 7ая версия можно было делать так:

1. .block{height: expression('32px'); min-height: 32px;}

Более универсально и в лоб, проблема решается так:

1. .block {
2. height: expression(this.scrollHeight < 201px ? "200px" : "auto" );
3. min-height: 200px;
4. }

1. .block {
2. height: expression(scrollHeight < 201px ? "200px" : "auto" );

В конце

• Пример с тремя методами