Довідник по CSS: Тематичний покажчик: Довідник за властивостями і атрибутами: Позиціонування: min-height
- Матеріал з Довідник Web-мов Атрибут min-height | властивість minHeight
- синтаксис
- використовувані значення
- зауваження
- приклади
- стандарти
- Підтримувані браузери
- Посилання на джерела
Матеріал з Довідник Web-мов Атрибут min-height | властивість minHeight
Задає мінімальну висоту об'єкта.
синтаксис
HTML{min-height: sMinHeight} Скрипти [sMinHeight =] object. style.minHeight [= v]
використовувані значення
sMinHeight Рядок, яка може визначати і приймати від одне з наступних значень: length Здається дійсним числом, вираженим в абсолютних (cm, mm, in, pt або pc) або відносних (em, ex або px) одиницях виміру. percentage Числове значення, виражене у відсотках (%). Задає який відсоток від висоти контекстного блоку буде розміром об'єкта. Якщо висота контекстного блоку точно не задана, то в елемента немає максимальної висоти, і властивість maxHeight інтерпретується як 0%.
Це властивість читається / записується для всіх об'єктів, крім currentStyle (тільки читання). Заводське немає. Атрибут Каскадних таблиць стилів (CSS) не успадковується.
зауваження
В Internet Explorer 6.0 це властивість застосовується для елементів td, th і tr в таблицях з фіксованим розміщенням. Для цього необхідно властивості tableLayout задати значення fixed. До речі, при цьому швидкість відображення таблиці зросте.
В Internet Explorer 7.0 атрибути max-height / Min-height застосовуються до блокових елементів з відносним і абсолютним позиціонуванням у вигляді як би вбудованих внутрішніх обмежень. Ці атрибути не застосовуються до непереміщуваними вбудованим елементам, таким як стовпці таблиці або групи рядків / стовпців.
приклади
Перший приклад ілюструє перевагу використання атрибута min-height замість HEIGHT для елементів tr.
<Html> <head> <title> min-height Attribute Example </ title> </ head> <body> <table border = "1" style = "table-layout: fixed; width: 100%;"> <tr > <td style = "height: 35px; background-color: # 99CCFF"> атрибут <b> height </ b> даного осередку задано значення 35px. В Internet Explorer текст обрізається якщо <b> height </ b> заданий для комірки чи рядки в таблиці з фіксованим розміщенням. Завдання атрибута <b> min-height </ b>, проте, дозволяє вмістити текст в клітинку шляхом збільшення висоти комірки або рядки. </ Td> </ tr> <tr> <td style = "min-height: 35px; background -color: # 99CCFF "> атрибут <b> min-height </ b> даного осередку задано значення 35px. В Internet Explorer текст обрізається якщо <b> height </ b> заданий для комірки чи рядки в таблиці з фіксованим розміщенням. Завдання атрибута <b> min-height </ b>, проте, дозволяє вмістити текст в клітинку шляхом збільшення висоти комірки або рядки. </ Td> </ tr> </ table> </ body> </ html>
У другому прикладі показано як застосовуються атрибути max-height / Min-height в елементу div.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"> <html> <head> <style type = "text / css"> .height {float: left; width: 300px; background: #fff; margin: 0 1em; } # Example1 {min-height: 200px; } # Example2 {max-height: 100px; } .Content {border: 1px solid # c00; padding: 5px; } </ Style> </ head> <body> <div class = "height" id = "example1"> <div class = "content"> <h2> {min-height: 200px} </ h2> <p> Висота цього блоку div завжди принаймні 200px. <br /> <br /> Контент не заповнює блок div повністю. </ p> </ div> </ div> <div class = "height" id = "example2"> <div class = "content"> <h2> {max-height: 100px} </ h2> <p> Висота блоку div не більше 100 px. <br /> <br /> Контент, що не вміщається в блок div, розташовується після нього </ p> </ div> </ div> </ body> </ html>
стандарти
Це властивість описано в Cascading Style Sheets (CSS), Level 2 (CSS2)
Підтримувані браузери
Internet Explorer 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0, 3.5
Посилання на джерела
http://msdn.microsoft.com/en-us/library/ms530815(VS.85).aspx
https://developer.mozilla.org/en/CSS/min-height