¿Realiza DIV rellenar el resto de la página verticalmente?

Question

Tengo una aplicación de Google Maps que ocupa la mayor parte de la página. Sin embargo, necesito reservar la franja más alta de espacio para una barra de menú. ¿Cómo puede hacer que el mapa div llene automáticamente su espacio vertical? height: 100% no funciona porque la barra superior empujará el mapa más allá de la parte inferior de la página.

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

Answer 1

Puede usar la posición absoluta.

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

Mediante la colocación de #content absoluta y la especificación de la parte superior, las propiedades de la derecha, abajo y de izquierda, se obtiene un div ocupar toda la ventana gráfica .

Luego estableces padding-top en #content para que sea> = la altura de #header.

Finalmente, coloque #header dentro de #content y colóquelo de manera absoluta (especificando arriba, izquierda, derecha y la altura).

No sé qué tan amigable para el navegador es esto. Consulte this article at A List Apart para obtener más información.

Answer 2

umm, es necesario agregar html, body { height: 100%; }, después de esto, un elemento relative, con min-height: 100%

Después de esto, para IE6

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

Esto dará a su sitio altura del 100% en todos los navegadores.
¡Pruébalo! Espero que ayude :)

Answer 3

La manera de hacerlo, al parecer, es el uso de JavaScript para supervisar los eventos onload y onResize y programáticamente cambiar el tamaño del div llenado de este modo:

Usando jQuery:

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

Uso de JavaScript sencillo:

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

Editar: y luego se unen a estos a la window o bject.

Answer 4

Te recomiendo que pruebes jquery-layout plugin. Verá un montón de demostraciones y ejemplos en el enlace.

No sé si está familiarizado con los conceptos de JQuery o algún otro marco de JavaScript, como ayudante Prototype.js o Mootools pero es una idea vital para utilizar uno de ellos. Ocultan la mayoría de los trucos relacionados con el navegador del programador y tienen una cantidad de extensiones útiles para la IU, la manipulación del DOM, etc.

Answer 5

Si calculate the page position of the div element se puede hacer sin saber el elemento de cabecera:

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

usos Otra solución no dados CSS3 en lugar de JavaScript. Hay una función calc() ahora que se puede utilizar para hacer la misma cosa:

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

Aquí está el jsfiddle

Es posible que también desee examinar el uso del estilo box-sizing: border-box para int erior divs ya que esto puede deshacerse de los problemas de relleno y bordes que sobresalen fuera de los divs de los padres.