CSS практик

IE. min-width\max-width и min-height\max-height

Posted by: fxix on: Октябрь 23, 2008

IE6 не держит, IE7 уже держит.

min-width – Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки. Писать в %\px\em.
С по­мощью свойств можно определить минимальный и максимальный размеры блока, данные, содержащиеся в нем, не будут сжиматься или растягиваться, чтобы заполнить блок. Свойства min-width и max-width позволяют установить наименьшую и наибольшую ширину блока.
min-height – удобно использовать тогда, когда вы хотите, чтобы незави­симо от содержимого высота области, занимаемой элементом, не была меньше опре­деленного значения. Если, например, вы укажете, что высота заголовка должна быть не менее пяти сантиметров, это будет минимальным размером блока, выделенного для данного элемента. Несмотря на то что max-height ограничит высоту элемента некоторым значением, на самом деле он влияет только на размеры блока; отсечение содержимого не происходит.

Для min-width

p {
min-width:400px;
width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 400? «400px»: «auto»);
}
(правильнее < 390 ? «400px» :»auto»);)

#container {
min-width: 420px; /* Мин. ширина контейнера – для нормальных браузеров */
width: expression(document.body.clientWidth > 420 ? «100%» : «420px») /* Ширина для IE6 */
}

Вначале пишем стилевой параметр width, а после двоеточия задаем ключевое слово expression. В скобках указан так называемый тернарный оператор, он трактуется следующим образом. Если ширина окна браузера (document.body.clientWidth) больше, чем 420 пикселов, то в качестве значения width используется 100%, иначе width присваивается значение 420px.

Для max-width
Чтобы параграф с текстом растягивался по ширине окна браузера до 400px, а затем фиксировался и в Mozilla, и в Opera, и в InternetExplorer:

p {
max-width:400px;
width:expression(document.body.clientWidth > 400? «400px»: «auto» );
}

Для max-height

p {
max-height:200px;
overflow:hidden;
height:expression(this.scrollHeight > 200? «200px» : «auto»);
}

Для min-height

p {
min-height:200px;
overflow:hidden;
height:expression(this.scrollHeight < 200? «200px» : «auto»);
}

Табличка:

Значения параметров                                                    Ширина
min-width     <     width      <      max-width             width
min-width     >     width      >     max-width              min-width
min-width     >     width      <     max-width              min-width
min-width     <     width                                             width
min-width     >     width                                             min-width
min-width     >                           max-width              min-width
min-width     <                           max-width              max-width
width      <      max-width             width
width      >      max-width            max-width

—————————-
min-height     <     height     <     max-height      height
min-height     >     height     >     max-height      min-height
min-height     >     height     <     max-height      min-height
min-height     <     height                                     height
min-height     >     height                                     min-height
min-height     >                          max-height       min-height
min-height     <                          max-height       max-height

*Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.