css - top - Haga que DIV complete el resto de la página verticalmente?

html p vertical align

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

La forma de hacerlo, aparentemente, es usar JavaScript para monitorear los eventos onload y onresize y cambiar el tamaño de forma programática del div de relleno de la siguiente manera:

Usando jQuery:

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

Usando JavaScript simple:

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

Editar: y luego vincular estos al objeto window .

Answer 2

Otra solución que no se proporciona utiliza CSS3 en lugar de javascript. Ahora hay una función de calc () que se puede usar para hacer lo mismo:

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

También es posible que desee considerar el uso del estilo box-sizing: border-box para divs interiores ya que esto puede eliminar los problemas de relleno y bordes que sobresalen fuera de los divs parentales.

Answer 3

Podría usar posicionamiento absoluto.

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

Al colocar #content absoluto y especificar las propiedades superior, derecha, inferior e izquierda, se obtiene un div ocupando toda la ventana gráfica.

Luego, establece el padding-top en #content para que sea> = el alto de #header .

Finalmente, coloque #header inside #content y #content manera absoluta (especificando top, left, right, y height).

No estoy seguro de qué tan amigable para el navegador es esto. Vea este artículo en A List Apart para más información.

Answer 4

Si calcula la posición de la página del elemento div , puede hacerlo sin conocer el elemento del encabezado:

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

Answer 5

Te recomiendo que pruebes el plugin jquery-layout . 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 ayuda de Javascript, como Prototype.js o Mootools pero es una idea vital usar 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 6

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