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.