Min-height, min-width, max-height, max-width для IE6
Хочу показать пример, как реализовывать гибкий шаблон не только на div, но и на таблицах. В последнее время очень много народ зависает на теме "эластичный шаблон на div-ах.". К чему такая паника, если можно это реализовать на таблицах. Все будет красиво и понятно. Я с div конечно дружу. Но не очень люблю делать шаблоны просто на них. Кроссверстка таблицы/div оптимальна.
Самая большая проблема в этой верстке это гибкость. Современные браузеры отлично понимают ограничения высоты и ширины через min- и max- инструкции. Но к сожалению ИЕ 6 с ним не дружит.
Для этого я использую expression от мелкомягких.
.body {
width : expression(parentNode.clientwidth > 880 ?"880px" : "auto");
max-width: 880px;
width: auto;}
Данное правильно определяет ширину блока. Чтобы IE6 понял как действовать с блоком вводим expression. Логика следующая: если ширина блока больше 880 px, то ограничиваем ширину 880 px, иначе растягиваем по ширине внешнего блока
Если продолжить логику expression, то мы можем легко создать правила для всех 4 направлений эластичности.
Ограничение по минимальной ширине min-width
.body {
width : expression(parentNode.clientwidth < 880 ? "880px" : "auto");
min-width: 880px;
width: auto;}
Ограничение по максимальной высоте max-height
.body {
height : expression(parentNode.clientHeight > 880 ? "880px" : "auto");
max-height: 880px;
height: auto;}
Ограничение по минимальной высоте min-height
.body {
height : expression(parentNode.clientHeight < 880 ? "880px" : "auto");
min-height: 880px;
height: auto;}
Вот такие простые решения легко делают любой вид эластичного шаблона гибким. И тогда содержимое всегда будет в размерах экрана и нечего не ускользнет от пользователя пришедшего к вам на сайт
Комментарии
для внешней оболочки содержимого страницы задаешь стиль margin: auto; и тогда шаблон будет всегда по ширине Ответить
Погуглил и вот какуб колбасу надыбал:
Цитата:Проверено работает !!! Ответить
Вопрос. а зачем?
если можно просто поставить height
пидалишь прямо в сss развилку
для ие6
* html body{ height:500px;}
для ие7
*+html body{ height:500px;}
получается то же самое
намного короче и код валидный
плохо что такое для width не катит.
для expression нужно отдельный файл делать ie.css как и для фильтров
тогда код будет валидным Ответить
width: 90%;
min-width: 900px;
max-width: 1100px;
border: 1px solid red;
text-align: left;
}
* html .page_container {
width: expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 1000 ? "900px" : ((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 1223 ? "1100px" : "90%");
} Ответить
.page { min-height: 500px; height: auto !important; height: 500px; } Ответить