Machen DIV den Rest der Seite vertikal füllen?

Question

Ich habe eine Google Maps App, die den größten Teil der Seite einnimmt. Allerdings muss ich den obersten Platz für eine Menüleiste reservieren. Wie kann die Karte div automatisch ihren vertikalen Raum ausfüllen? height: 100% funktioniert nicht, da die obere Leiste dann die Karte über den unteren Rand der Seite hinaus verschiebt.

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

Answer 1

Sie könnten absolute Positionierung verwenden.

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; 
} 

Durch #content absolut positionieren und die oben spezifiziert, rechts, unten und links Eigenschaften, erhalten Sie ein div das gesamte Ansichtsfenster Aufnahme .

Dann setzen Sie padding-top auf #content auf> = die Höhe von #header.

Schließlich #header innerhalb #content platzieren und absolut positionieren (oben, links, rechts und die Höhe angeben).

Ich bin nicht sicher, wie browserfreundlich das ist. Weitere Informationen finden Sie unter this article at A List Apart.

Answer 2

umm, müssen Sie html, body { height: 100%; }, nach diesem, ein relative Element hinzuzufügen, mit min-height: 100%

Danach, für IE6

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

Diese Ihre Website 100% Höhe in jedem Browser geben.
Probieren Sie es aus! Ich hoffe, es hilft :)

Answer 3

Die Art und Weise, es zu tun, es scheint, ist JavaScript zu verwenden, um die onload und onresize Ereignisse zu überwachen und programmatisch die Füllung div die Größe wie folgt:

Mit jQuery:

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

Ebene JavaScript verwenden:

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

Edit: und diese dann window zum binden o Gegenstand.

Answer 4

Ich empfehle Ihnen, versuchen jquery-layout Plugin. Sie werden eine Reihe von Demos und Beispielen auf dem Link sehen.

Ich weiß nicht, ob Sie mit den Konzepten von JQuery oder einem anderen Javascript Helfer Framework vertraut sind, wie Prototype.js oder Mootools aber es ist eine wichtige Idee einer von ihnen zu verwenden. Sie verstecken die meisten Browser-bezogenen Tricks vom Programmierer und sie haben eine Reihe nützlicher Erweiterungen für UI, DOM-Manipulation usw.

Answer 5

Wenn Sie calculate the page position of the div element Sie ohne zu wissen, das Kopfelement kann:

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

Eine andere Lösung nicht gegeben Verwendungen CSS3 statt Javascript. Es gibt eine calc() -Funktion nun die verwendet werden können, das Gleiche zu tun:

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; 
} 

Hier ist die jsfiddle

Vielleicht möchten Sie auch den Stil box-sizing: border-box für int verwenden Erior divs, da dies Probleme von Padding und Grenzen außerhalb der Eltern divs loswerden kann.