WEB лаборатория DLE » Другое для WEB » Разное и другое » Как сделать div со 100% height
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

    Как сделать div со 100% height

    Как сделать div со 100% height


    При блочной вёрстке часто требуется сделать у блока div высоту 100%. Простым указанием height=100% в div не получится добиться желаемого результата, поэтому тут есть определённая методика, о которой я в этой статье расскажу.

    Прежде чем приводить код, объясню принцип его работы. Его суть состоит в том, чтобы указывать height=100% у всех родительских блоков, в том числе, и у html. Например, вот этот код позволяет сделать div с высотой 100%:




    DIV со 100% height

    html, body {
    height: 100%;
    }
    div {
    height:100%;
    background-color: #f00;
    }
    div div {
    background-color: #0f0;
    width: 50px;
    }




    Текст




    В результате, оба div будут высотой 100%. Обратите внимание, что если убрать у html height 100%, то уже ничего не выйдет. Аналогично, если у верхнего div убрать height 100%, а у внутреннего оставить, то внутренний не будет со 100% высотой. То есть помните, чтобы сделать div со 100% height необходимо каждый родительский блок так же сделать со 100% высотой.



    Теги:

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

    • Как сделать фон картинкойОчень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так
    • Как сделать тень на CSSДизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика - это целая история. Если Вы будете искать в Интернете, как сделать
    • Красные Ajax окна by Winston888
    • Новые виды цитат для ucozНовые виды цитат для ucoz. Всего 6 цветовых вариантов, и скорей всего вы найдется цвет подходящий под ваш сайт. Установка не составит труда, все что будет необходимо сделать так это скопировать css
    • Кнопка на css для ucozКрасивая кнопка на css для сайта ucoz,ранее была добавленна такая только синего цвета теперь ловим красную настраиваем под себя


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