Динамическая высота контейнера DIV - PullRequest
Новая
       16

Динамическая высота контейнера DIV

2 голосов
/ 20 марта 2012

я знаю, что каждый веб-разработчик ненавидит эту тему, но в любом случае ... я не нашел хорошего решения для этого.

у меня есть 3 DIV, два статических (серые) и один динамический (красный).Изображение описывает все окно.Например, в приложении чата.

the div container

И, да, вопрос в том, как получить динамический красный при изменении размера окна (или при других изменениях макета).,Есть ли солтуон без javascript , только CSS (3)?

Редактировать : Условие: DIV внизу должен оставаться внизу окна, извините.

Дополнительная информация

Я уже сделал это в JS (jQuery), но я думаю, что это не совсем хорошая практика.(Метод изменения размера для среднего DIV должен реализовываться в каждом «событии изменения макета»).

Пример здесь: 

var div1 = $('#div1').outerHeight(true);
var div2 = $('#div2').outerHeight(true);
var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();

$('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });

Ответы [ 3 ]

3 голосов
/ 20 марта 2012

С абсолютным позиционированием вы можете сделать: http://jsfiddle.net/rQVmK/

<html>
    <style type="text/css">
    #div1, div2, div3 { position: absolute; }
    #div1 {
        border: 3px solid #eee;
        height: 30px;
        top: 0; left: 0; right: 0;
    }
    #div2 {
        border: 3px solid #e00;
        top: 30px; bottom: 30px;
        left: 0; right: 0;
    }
    #div3 {
        border: 3px solid #eee;
        height: 30px;
        top: auto;
        bottom: 0; left: 0; right: 0;
    }
    </style>

    <div id="div1">Top</div>
    <div id="div2">Middle</div>
    <div id="div3">Bottom</div>
</html>
0 голосов
/ 20 марта 2012

Не знаю, пропускаю ли я что-то, но именно так div-ы и все элементы уровня блока реагируют естественным образом, все, что вам нужно сделать, это правильно содержать их и не передавать им фиксированную высоту, поскольку они имеют height:auto по умолчанию.Попробуйте эту настройку, например:

HTML 

<div class="container">
    <div class="header">
        This is a header
    </div>
    <div class="content">
        This is a content div
    </div>
    <div class="footer">
        This is a footer
    </div>
</div>

CSS 

.container {
    width:378px;
    margin:0 auto;
    padding:10px;
    background-color:#fff;
    border:1px solid #515151;
}

.header, .footer {
    height:60px;
}

.header {
    background-color:#00B4FF;
}

.footer {
    background-color:#515151;
}

.content {
    border:1px solid #000;
    margin:10px 0;
    padding:10px;
}

Демо

0 голосов
/ 20 марта 2012

Вы можете использовать абсолютное позиционирование и указание как верхней, так и нижней позиции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...