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

29 November, 2007

XHTML/CSS, Полезности

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

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

1. min-height через height

Говорят, разработчики IE5-6 реализовали свойство min-height, просто решили его назвать height, так оно вобщем то и есть. height для 5й и 6й версий ведет себя как min-height. В 7й версии min-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}

Этот способ требует однако дополнительного элемента “.inner”, тем не менее является пожалуй самым простым и иногда удобным.
Что бы кусок кода был максимально универсальным – лучше добавлять аж 2 обертки:

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

В примере я вместо второй обертки использовал элемент h2.

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

Как всегда все можно решить с помощью джаваскрипт.

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

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

Однако этот вариант не работает в 7й версии.

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

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

Или что бы ускорить работу скрипта, как советует Павел Корнилов, this можно опустить:

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

Для body, однако, так нельзя оптимизировать.

В конце

Буду рад услышать ваши методы и мысли по поводу решения этой проблемы!

XHTML/CSS, Полезности

27 комментариев к “Cколько-то способов min-height”

Sam | 1. 29 November, 2007

Давно пользуюсь №1. Про второй не знал. Expression не люблю.

akella | 2. 29 November, 2007

2 и 3й уже скорее дань истории, пока не было min-height в ИЕ7(а в бетах ее не было) приходилось к ним прибегать.

romand | 3. 29 November, 2007

якщо мета питання про min-height – приліпити .footer до нижньої межі “бровзера” –
http://www.themaninblue.com/experiment/footerStickAlt/

Zigzag | 4. 29 November, 2007

молодца, давно было их все вместе собрать =)

akella | 5. 29 November, 2007

romand: мета може бути різною – я частіше використовував для чисто дизайнерськіх моментів, але лінк звісно хороший та відомий – нехай буде =)

Zigzag: дякую!

Dimox | 6. 29 November, 2007

Первым способом пользуюсь постоянно. Про второй не знал. Спасибо за него.

Slaver | 7. 29 November, 2007

Только первый вариант! :)

Mourner | 8. 30 November, 2007

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

Второй способ требует дополнительного элемента в маркапе.

Так что лично для меня только первый :)

Руслан | 9. 30 November, 2007

Если работает первый метод, то зачем изобретать велосипед?
В любом случае, интересно было узнать что-то новое (2й и 3й метод =) Спасибо!

agat | 10. 30 November, 2007

А Conditional Comments использовать для чистоты основного CSS-файла это уже не модно? :) И никаких странных хаков, перехаков.

akella | 11. 30 November, 2007

дада, так и есть, просто я проморгал поддержку min-height у IE7, и пост этот писал чуть не год назад, когда это было актуально, просто вот подзадержался он =). Стоит убрать этот один маленький нюанс – и уже нужны все три метода. :) Вобщем то на данный момент самым простым и правильным остается первый. Эх как быстро время бежит

@ЖенатыйAgat: дык хаки то валидные =) Чего лишний раз кондкомментить

akira | 12. 30 November, 2007

Что-то я не понимаю про expression.
Это все браузеры поймут?
А какие преимущества перед JavaScript в отдельном файле?

akella | 13. 30 November, 2007

Преимущества, что его(js) только ради этих целей можно не создавать, а описать это поведение в CSS. Оно отчасти и логично, ведь все что делает этот кусочек js — это эмуляция CSS свойства min-height.

Поймет это конечно только IE, а все остальные уже поддерживают min-height.

lusever | 14. 30 November, 2007

Я выложу :)

height: expression(this.scrollHeight < 201px ? "200px" : "auto" ); меняется на height: expression(scrollHeight < 201 ? "200px" : "auto" ); Прооптимизировать это для динамического контента, или, если требуется зависимость от ширины окна браузера невозможно. Еще есть способ, задать минимальную ширину вставив прозрачный gif, например тем же экспрешеном, вот это запросто оптимизируется. Можно развернуться и красиво написать.

rr | 15. 30 November, 2007

а как на счет

.block {
  min-height:200px;
  *height:200px;
}

или валидность на первом месте?)

akella | 16. 30 November, 2007

Отличный рабочий вариант, но тот(Дастина Диаза) не так из-за валидности рулит, как из-за future-proof.
Кто их знает как броузеры будут понимать эту * через пару лет, а !important – все же четко описан. Да и сафари иногда грешит пониманием невалидных ЦСС.

Впрочем де факто думаю это решение еще года два можно смело применять. =) не забывая тестить

Sukebe | 17. 1 December, 2007

Мой вариант такой:

.block {
    min-height: 200px;
}
* html .block {
    height: 200px;
}
Shimon | 18. 3 December, 2007

Спасибо, пригодится!
Вот только у меня тот же вопрос возник, что и у Романа выше – зачем нужны другие способы если есть первый?

akella | 19. 3 December, 2007

Я в 11 комментарии вроде как ответил =) Теперь уже больше для справки и как примеры идей, которые возможно применить в других областях.

К примеру второй метод можно легко приложить к кендо.

gordi | 20. 3 December, 2007

По второму способу заморачивался не давно:
http://trifler.ru/blog/post_1192811790.html
http://trifler.ru/blog/post_1193561490.html
Увы, масса дополнительных блоков является большим минусом.
Поэтому варианты 1 и 3 предпочтительней.

Tutta Karlsson | 21. 7 December, 2007

Все изложенные способы не очень практичны и ущербны.
1. Для эластичной верстки, как правило, часто блоку необходимо ДЕРЖАТЬ ВЫСОТУ ОКНА и только в случае малых размеров скролироваться, сохраняя дизайн и целостность юзабилити. При этом фиксированная в 200px высота не катит и след. метод №1 тоже не катит.
Остается скрипт все равно в виде expression или js.
width: expression(document.body.clientHeight > 200 ? “100%” : “200px”)

2. НО Действительно НАСТОЯЩЕЙ проблемой на сегодняшний момент является проблема больших мониторов (24″ и более), которых становится уже предостаточно. Проблема состоит в том – каким образом установить ОДНОВРЕМЕННО min-height и max-height ????

akella | 22. 7 December, 2007

1) Вы видимо имели ввиду резиновой верстки? Эластичная — это зависимая от размера шрифта, такая принята терминология.
Решение проблемы высоты в экран куда проще – http://www.themaninblue.com/experiment/footerStickAlt/. Если я неправильно понял – покажите сайт с тем поведением которого вы хотите достигнуть, а то я слегка запутался в том почему методы не катят.

2) А что в этом такого? Так же как и min-max width http://uggallery.audiopeace.ru/2007/10/27/min-max-width-ie5-6 замените width на height и все. Чем такой вариант Вам неподошёл?
Или вот еще более оптимизированный – http://www.gunlaug.no/contents/wd_additions_14.html

CSS for standard compliant browsers:

#wrapper {width: 99%;
max-width: 1200px; 
min-width: 550px;}

CSS for MSIE/win:

* html div#wrapper {width: 760px /* fallback value */;
width:expression(((document.compatMode && 
document.compatMode=='CSS1Compat') ? 
document.documentElement.clientWidth : 
document.body.clientWidth) 
> 1218 ? '1200px' : (((document.compatMode && 
document.compatMode=='CSS1Compat') ? 
document.documentElement.clientWidth : 
document.body.clientWidth) < 570 ? '552px' : '99.7%')); }

А Тут вообще специальный джаваскрипт для таких целей написали =)

Serge | 23. 18 December, 2007

2 Sukebe +1

правильный ответ 1 !!!!

Андрей | 24. 6 January, 2008

Отличный сайт, отличный контент. В работе ваши рекомендации помогут.

Обзор №3, Январь 2008 - Design For Masters | 25. 21 September, 2008

[…] Cколько-то способов min-height Min-height свойство нужное, часто полезное, но в Internet Explorer не работает, вразумить его можно несколькими способами о которых и идет речь. […]

Jen | 26. 1 April, 2009

может, я что-то не так делаю, но по первому способу это работает, только до какой-то высоты (около 20 пикселов). Сделать min-height 1px это не помогло.

Сергей | 27. 30 April, 2010

Пример где min-height имитируется с помощью important не работает в ie8 (где так же не работают min-height). Если для div указать overflow:hidden то ie будет обрезать данные, а ff и opera будут отображать нормально

Оставить комментарий