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

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

    Опрос

    gismeteo.ru
    Погода на Яндексе
    pogoda.ru
    meteonova.ru
    по телевизору
    за окном
    в газете
    а че его смотреть?
    в другом месте
    по счетчику гейгера



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

    Архив новостей
    Март 2022 (1)
    Декабрь 2021 (1)
    Август 2021 (1)
    Июль 2021 (3)
    Февраль 2021 (3)
    Январь 2021 (1)

    Информация
    Как заставить 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, DLE, DLE хаки, domoticz, dzvents, Home Assistant, HomeAssistant, Linux, log, LUA, Monster, ogf3, Template, VBS, w2k8, windows, WSH, xiaomi, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, уведомления, фигуры, шаблон, Яндекс, яндекс-карты

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