Diseño CSS de altura mínima del 100%

¿Cuál es la mejor manera de hacer un elemento de 100% de altura mínima en una amplia gama de navegadores?

En particular, si tiene un diseño con un headery footerde fijo height,

¿Cómo hacer que el contenido del medio llene 100%el espacio intermedio con el footerfijo en la parte inferior?

Estoy usando el siguiente: Diseño CSS - 100% de altura

Altura mínima

El elemento #container de esta página tiene una altura mínima del 100%. De esa manera, si el contenido requiere más altura de la que proporciona la ventana gráfica, la altura de #content obliga a #container a hacerse más larga también. Las posibles columnas en #content se pueden visualizar con una imagen de fondo en #container; los divs no son celdas de tabla, y no necesita (ni desea) los elementos físicos para crear un efecto visual de este tipo. Si aún no estás convencido; piense en líneas y gradientes tambaleantes en lugar de líneas rectas y esquemas de colores simples.

Posicionamiento relativo

Debido a que #container tiene una posición relativa, #footer siempre permanecerá en su parte inferior; dado que la altura mínima mencionada anteriormente no impide que #container se escale, esto funcionará incluso si (o más bien especialmente cuando) #content obliga a #container a alargarse.

Fondo acolchado

Dado que ya no está en el flujo normal, el relleno inferior de #content ahora proporciona el espacio para el #footer absoluto. Este relleno se incluye en la altura desplazada de forma predeterminada, de modo que el pie de página nunca se superpondrá al contenido anterior.

Escale un poco el tamaño del texto o cambie el tamaño de la ventana de su navegador para probar este diseño.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Funciona bien para mi.

Para establecer una altura personalizada bloqueada en algún lugar:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Aquí hay otra solución basada en vh, o viewpoint height, para más detalles, visite las unidades CSS . Se basa en esta solución , que utiliza flex en su lugar.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Las unidades son vw, vh, vmax, vmin. Básicamente, cada unidad es igual al 1% del tamaño de la ventana gráfica. Entonces, a medida que cambia la ventana gráfica, el navegador calcula ese valor y lo ajusta en consecuencia.

Puede encontrar más información aquí:

Específicamente:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

La respuesta de kleolb02 se ve bastante bien. otra forma sería una combinación del pie de página adhesivo y el truco de altura mínima

Para min-heighttrabajar correctamente con porcentajes, mientras hereda su nodo primario min-height, el truco sería establecer la altura del nodo primario 1pxy luego el niño min-heightfuncionará correctamente.

Página de demostración

Una CSSsolución pura ( #content { min-height: 100%; }) funcionará en muchos casos, pero no en todos ellos, especialmente IE6 e IE7.

Desafortunadamente, deberá recurrir a una solución de JavaScript para obtener el comportamiento deseado. Esto se puede hacer calculando la altura deseada para su contenido <div>y configurándolo como una propiedad CSS en una función:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Luego puede configurar esta función como un controlador para onLoady onResizeeventos:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Estoy de acuerdo con Levik, ya que el contenedor principal está configurado al 100% si tiene barras laterales y desea que llenen el espacio para encontrarse con el pie de página, no puede configurarlas al 100% porque también serán el 100 por ciento de la altura principal que significa que el pie de página termina siendo empujado hacia abajo cuando se usa la función clear.

Piénselo de esta manera si su encabezado tiene una altura de 50 píxeles y su pie de página tiene una altura de 50 píxeles y el contenido se ajusta automáticamente al espacio restante, por ejemplo, 100 píxeles y el contenedor de la página tiene el 100% de este valor, su altura será de 200 píxeles. Luego, cuando configura la altura de la barra lateral al 100%, es de 200 px, aunque se supone que debe ajustarse perfectamente entre el encabezado y el pie de página. En cambio, termina siendo 50px + 200px + 50px, por lo que la página ahora tiene 300px porque las barras laterales están configuradas a la misma altura que el contenedor de la página. Habrá un gran espacio en blanco en el contenido de la página.

Estoy usando internet Explorer 9 y esto es lo que obtengo como efecto cuando uso este método 100%. No lo he probado en otros navegadores y supongo que puede funcionar en algunas de las otras opciones. Pero no será universal.

Primero debe crear un divcon id='footer'después de su contentdiv y luego simplemente hacer esto.

Su HTML debería verse así:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Y el CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Prueba esto:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

El divelemento debajo del contenido div debe tener clear:both.

Probablemente la solución más corta (solo funciona en navegadores modernos)

Este pequeño pedazo de CSS hace "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

El único requisito es que debe tener un pie de página de altura fija.

Por ejemplo para este diseño:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

necesitas este CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Puede probar esto: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Eso es 100% de altura y centro horizontal.

simplemente comparta lo que he usado y funciona bien

#content{
        height: auto;
        min-height:350px;
}

Como se menciona en la respuesta de Afshin Mehrabani, debe establecer la altura del cuerpo y del html al 100%, pero para obtener el pie de página allí, calcule la altura del envoltorio:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}