Min-width

Автор: Евгений Рыжков Дата публикации:

Проблема

Решение

Метод 1 — используем expression

Пример 1 — задаем минимальную ширину основного блока в 1002 (чтобы при резиновой верстке макет не сужался при ширине окна браузере менее 1024px):

.block{

min-width: 1002px;

width:expression(document.body.clientWidth < 1002? "1002px": "auto" );

}

Если зависает, можно пробовать изменить условие:

.block{

min-width: 1002px;

width:expression(document.body.clientWidth > 1002? "auto": "1002px" );

}

или попробовать еще вот так — задать в условии ширину на 1 больше, чем требуется:

.block{

min-width: 1002px;

width:expression(document.body.clientWidth < 1003? "1002px": "auto" );

}

Пример 2 — задаем минимальную ширину для блока Block2, вложенного в блок Block1.

html код:

<div class="block1">

   <div class="block2"></div>

</div>

css код:

.block1 {

width: 60%;

}

.block2 {

width: 50%;

min-width: 200px;

width:expression(offsetWidth < 200 ? "200px" : "60%" );

}

Этот вариант не рабочий. Нельзя привязываться к текущей ширине блока, для котрого реализуем min-width. Если есть возможность, тогда делаем расчеты относительно ширины родительского блока либо относительно ширины body:

.block2 {

width: 50%;

min-width: 200px;

width:expression(parentNode.offsetWidth < 400 ? "200px" : "60%" );

}

Плюс данного метода — простота реализации.

Недостатки данного метода:

не всегда возможно его использовать, из-за невозможности привязки к ширине масштабируемого блока
может подвисать браузер (IE6)
замедляет работу браузера (IE6)
не проходит валидацию

Метод 2 на основе CSS — два обертывающих <div>

HTML конструкция:

<div class="forh">

   <div class="minwidth">

   <div class="container">

     ...содержимое...

   </div>

   </div>

</div>

CSS:

.forh {

min-width: 980px;

}

* html .minwidth {

border-left: 980px solid #fff; /* min-width */ 

position: relative; 

float: left; 

z-index: 1; 

}

* html .container { 

margin-left: -980px; /* min-width */ 

position: relative; 

float: left; 

z-index: 2;

}

На примере видно, что часть страницы «съелась» за счет смещения основного блока влево. Чтобы этого избежать методом проб подгоняем нужные значения margin-left для блока container. Получаем:

.forh {

min-width: 980px;

}

* html .minwidth {

border-left: 980px solid #fff; /* min-width */ 

position: relative; 

float: left; 

z-index: 1; 

}

* html .container { 

margin-left: -960px; /* min-width */ 

position: relative; 

float: left; 

z-index: 2;

}

Смотрим результат.

Плюс данного метода — валидный код

Минусы данного метода:

достаточно трудоемкий процесс подбора нужных значений border-left: 980px и margin-left: -980px;
не все таким образом реализуемо
добавляется два дополнительных дива

Метод 3 — использование Javascript

Включаем в код страницы скрипт:

<html>

<head>

<style type="text/css">

* {margin: 0; padding:0;}

#wrap {

min-width: 990px;

}

</style>

<!--[if lte IE 6]>

<script type="text/javascript">

window.attachEvent("onload", minwidth);

window.attachEvent("onresize", minwidth);

function minwidth(){ document.getElementById("wrap").style.width = (document.body.clientWidth < 990 ? "990px" : "100%")  };

</script>

<![endif]-->

</head>

<body>

<div id="wrap">

...содержимое...

</div>

</body>

Плюсы данного метода:

не подвисает браузер
валидный код

Недостатки:

должен быть включен Javascript
довольно много «лишнего кода» (можно обойти ,если скрипт вынести в отдельный js файл)

Метод 4 — используем распорку

Добавляем элемент (например div или img) шириной равной минимальной.

HTML код:

<html>

<head>

<style type="text/css">

* {margin: 0; padding:0;}

body {

background: #fff;

}

.forh {

min-width:1000px;

}

.minwidth {

width: 1000px;

height: 1px;

overflow: hidden;

}

</style>

</head>

<body>

<div class="forh">

<div class="minwidth"></div>

...содержимое...

</div>

</body>

</html>

Плюс метода — простота и понятность.