Сделать DIV заполнить оставшуюся часть страницы по вертикали?

Question

У меня есть приложение Google Maps, которое занимает большую часть страницы. Однако мне нужно зарезервировать самую верхнюю полосу пространства для строки меню. Как заставить карту div автоматически заполнять вертикальное пространство? height: 100% не работает, потому что верхняя панель затем проталкивает карту за нижнюю часть страницы.

+--------------------------------+
|      top bar  (n units tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|     (100%-n units tall)        |
|              |                 |
|              v                 |
+--------------------------------+

Answer 1

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

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

При позиционировании #content абсолютно и указав свойства top, right, bottom и left, вы получите div, занимающий весь видовой экран.

Затем вы устанавливаете padding-top для #content, чтобы быть> = высота #header.

Наконец, поместите #header внутри #content и расположите его абсолютно (указав верхнюю, левую, правую и высоту).

Я не увереннасколько это удобно для браузера. Ознакомьтесь с этой статьей в A List Apart для получения дополнительной информации.

Answer 2

Способ сделать это, по-видимому, использовать JavaScript для отслеживания событий onload и onresize и программным образом изменять размер заполняющего div следующим образом:

Использование jQuery:

function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}

Использование простого JavaScript:

function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}

Редактировать: и затем связать их с window объектом.

Answer 3

Другое решение, которое не дано, использует CSS3, а не javascript.Теперь есть функция calc (), которую можно использовать для того же:

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

Вот jsfiddle

Возможно, вы захотите использовать стиль box-sizing: border-box для внутренних элементов div, поскольку это может избавить от проблем с заполнением и разбиванием границ.за пределами родительских дел.

Answer 4

Если вы вычислите позицию страницы элемента div , вы можете обойтись без знания элемента header:

function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}

Answer 5

Я рекомендую вам попробовать jquery-layout плагин. По ссылке вы увидите множество демонстраций и примеров.

Я не знаю, знакомы ли вы с понятиями JQuery или с некоторыми другими вспомогательными средами Javascript, такими как Prototype.js или Mootools , но это жизненная идея использовать один из них. Они скрывают большинство трюков, связанных с браузером, от программиста и имеют ряд полезных расширений для пользовательского интерфейса, манипулирования DOM и т. Д.

Answer 6

var sizeFooter = function(){
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);