Сделать 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 абсолютно и указания сверху, справа, снизу, и левые свойства, вы получите DIV занимают всю область просмотра ,

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

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

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

Answer 2

ммм, вам нужно добавить html, body { height: 100%; }, после этого, в relative элемент, с min-height: 100%

После этого, для IE6

<!--[if lt IE 7]> 
<style media="screen" type="text/css"> 
    MyAutoheightElement 
    { 
     height: 100%; 
    } 
</style> 
<![endif]--> 

Это даст свой сайт на 100% высоты в каждом браузере.
Попробуйте! Я надеюсь, что это помогает :)

Answer 3

Способ сделать это, по-видимому, заключается в использовании 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"; 
} 

Edit:, а затем привязать их к window о ▪ Таблица.

Answer 4

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

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

Answer 5

Если вы calculate the page position of the div element вы можете сделать, не зная элемент заголовка:

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

Answer 6

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

Answer 7

Другое решение не учитывая применения CSS3, а не JavaScript. Существует функция известково() теперь, который может быть использован, чтобы сделать то же самое:

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 для int erior divs, так как это может избавиться от проблем заполнения и границ, вырывающихся за пределы родительских div.