Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

Выходит с 17 июля 2008 г. цена договорная

Опрос

Windows Mobile
Symbian
Android
iPhone
Linux
другая
не знаю
у меня обычный телефон



Календарь
«    Октябрь 2009    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031 

Архив новостей
Май 2019 (2)
Март 2019 (1)
Январь 2019 (1)
Декабрь 2018 (1)
Ноябрь 2018 (3)
Октябрь 2018 (2)

Информация
Как заставить min-height работать
Web » css
автор: dimon, опубликовано: 15 октября 2009

Реализация min-height в разных браузерах отличается и в результате где-то работает, а где-то и не работает.

Проверим код в доступных браузерах:

<div style="background:White; border: solid 1px black; min-height: 50px;">Text</div>


Text


IE 6 -
IE 8 +
Opera 10 +
Firefox 3 +

Разработчики IE 5-6 реализовали свойство min-height, просто решили его назвать height. т.е. height для 5-ой и 6-ой версий ведет себя именно как min-height.

Рассмотрим способы реализации min-height, работающие во всех браузерах (в старых версиях).

Вариант 1

<div style="background:White; border: solid 1px black; min-height: 50px; height:auto !important; height: 50px;">Text1</div>


Text1


IE 6 +
IE 8 +
Opera 10 +
Firefox 3 +

Вариант 2

С помощью javascript:

<div style="background:White; border: solid 1px black; height: expression(this.scrollHeight < 51px ? '50px' : 'auto' ); min-height: 50px;">Text2</div>


Text2


IE 6 -
IE 8 +
Opera 10 +
Firefox 3 +

Недостатками данного метода является снижение скорости отображения страницы, а так же необходимость поддержки JS браузером. Хотя браузеров без поддержки ява-скриптов уже почти и не осталось, но иногда ява бывает отключена с точки зрения повышения безопасности.

PS: Возможно, что на этой станичке Вы увидите, что первый и третий блок высотой не 50px - это накладывается DLE feel

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

Другие новости по теме:

  • Простенький трёхколонный резиновый макет на div-ах
  • DIV закругленные углы блока
  • DIV прямоугольные блоки - положение друг относительно друга
  • Тег DIV - прямоугольный блок
  • DLE хаки: Добавление height и width к [img] и [thumb]


  • Комментарии:



     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Android, Arduino, backup, CentOS, cmd, css, div, DLE, DLE хаки, domoticz, dzvents, LCD, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2018 by dimon - all right reserved!
    Тираж:       Счетчик тИЦ и PR     экземпляров.   Дизайн, верстка by dimon