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


¿Cuál es la mejor manera de hacer un elemento con una altura mínima del 100% en una amplia gama de navegadores? En particular, si tiene un diseño con un encabezado y un pie de página de altura fija, ¿cómo hace que la parte del contenido intermedio llene el 100% del espacio intermedio con el pie de página fijo en la parte inferior?


149
2017-08-24 17:59


origen


Respuestas:


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

Min-altura

El elemento #container de esta página tiene una altura mínima del 100%. Ese   De esta forma, si el contenido requiere más altura de la que proporciona la ventana gráfica,   la altura de #content obliga a #container a alargarse también.   Las columnas posibles en #content se pueden visualizar con un fondo   imagen en #container; divs no son celdas de tabla, y no necesita (o   quiere) los elementos físicos para crear tal efecto visual. Si eres   todavía no convencido; pensar líneas y gradientes tambaleantes en lugar de   líneas rectas y esquemas de color simples.

Posicionamiento relativo

Como #container tiene una posición relativa, #footer siempre permanecerá   en su parte inferior; ya que la altura mínima mencionada anteriormente no previene   #container from scaling, esto funcionará incluso si (o más especialmente cuando) #content obliga #container a ser más largo.

Fondo acolchado

Como ya no está en el flujo normal, el fondo de relleno de #content   ahora proporciona el espacio para el #footer absoluto. Este relleno es   incluido en la altura desplazada por defecto, de modo que el pie de página se   nunca superponga el contenido anterior.

Escala un poco el tamaño del texto o cambia el tamaño de la ventana de tu navegador para probar esto   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 mí


110
2017-08-24 18:12



Para configurar una altura personalizada bloqueada en alguna parte:

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>


29
2018-03-30 12:06



Aquí hay otra solución basada en vh, o viewpoint height, para más detalles, visite Unidades CSS. Se basa en esto solución, que usa 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, cuando la ventana gráfica cambia, el navegador calcula ese valor y se 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

20
2017-08-15 17:40



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


15
2017-08-27 18:29



Un puro CSS solución (#content { min-height: 100%; }) funcionará en muchos casos, pero no en todos, especialmente IE6 e IE7.

Lamentablemente, 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 configurarlo como una propiedad de 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';
}

A continuación, puede establecer esta función como un controlador para onLoad y onResize eventos:

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

6
2017-09-03 23:41



por min-height para trabajar correctamente con porcentajes, mientras hereda su nodo padre min-height, el truco sería establecer la altura del nodo padre en 1px y luego el niño min-height funcionará correctamente

Página de demostración


5
2017-08-28 11:33



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

Piénselo de esta manera si su encabezado es decir 50px de altura y su pie de página es de 50px de alto y el contenido solo se adapta automáticamente al espacio restante, digamos 100px por ejemplo y el contenedor de página es 100% de este valor, su altura será 200px. Luego, cuando establece la altura de la barra lateral en 100%, entonces es 200px, aunque se supone que debe ajustarse entre el encabezado y el pie de página. En cambio, termina siendo 50px + 200px + 50px, por lo que la página ahora es 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 al usar 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.


3
2018-04-18 05:07