div - title html
Diseño CSS 100% de altura mínima (13)
¿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?
Probablemente la solución más corta (funciona solo en navegadores modernos)
Esta pequeña pieza de CSS hace que "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; }
Aquí hay otra solución basada en vh , o en la viewpoint height , para detalles visite w3schools.com/cssref/css_units.asp . Se basa en esta solution , 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 here:
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
Como se menciona en la respuesta de Afshin Mehrabani, debe establecer el cuerpo y la altura de html en 100%, pero para obtener el pie de página allí, calcule la altura del contenedor:
#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);
}
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.
Estoy usando el siguiente: Diseño de CSS - 100% de altura
Min-altura
El elemento #container de esta página tiene una altura mínima del 100%. 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 pueden visualizarse 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 dicho efecto visual. Si aún no estás convencido; piense en 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 evita que #container se escale, esto funcionará incluso si (o más bien cuando) #content fuerza #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 #footer absoluto. Este relleno está incluido en la altura del desplazamiento de forma predeterminada, de modo que el pie de página nunca se superpondrá con el 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 mí
La respuesta de kleolb02 se ve bastante bien. Otra forma sería una combinación del pie de página adhesivo y el hack de altura mínima
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>
Para que min-height funcione correctamente con porcentajes, mientras que hereda su min-height nodo padre, el truco sería establecer la altura del nodo padre en 1px y luego la min-height del niño funcionará correctamente.
Primero debes crear un div con id=''footer'' después de tu div de content y luego simplemente haz 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 elemento div debajo del contenido div debe tener clear:both .
Puedes probar esto: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Eso es 100% de altura y centro horizontal.
Una solución de CSS puro ( #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 configurándolo 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 los eventos onLoad y onResize :
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
solo comparta lo que he usado, y funciona bien
#content{
height: auto;
min-height:350px;
}