Respuestas:
El truco para esto es especificar 100% de altura en los elementos html y body. Algunos navegadores buscan los elementos principales (html, body) para calcular la altura.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}olvídate de todas las respuestas, esta línea de CSS funcionó para mí en 2 segundos:
height:100vh;1vh = 1% de la altura de la pantalla del navegador
Para el escalado de diseño receptivo, es posible que desee utilizar:
min-height: 100vh[actualización de noviembre de 2018] Como se menciona en los comentarios, el uso de la altura mínima puede evitar problemas con los diseños de respuesta
[actualización de abril de 2018] Como se menciona en los comentarios, en 2011, cuando se hizo la pregunta, no todos los navegadores admitían las unidades de visualización. Las otras respuestas fueron las soluciones en ese entonces: vmaxtodavía no es compatible con IE, por lo que esta podría no ser la mejor solución para todos todavía.
min-height: 100vhsería mucho mejor. También se escalaría para diseños receptivos.
En realidad, el mejor enfoque es este:
html {
height:100%;
}
body {
min-height:100%;
}Esto me resuelve todo y me ayuda a controlar mi pie de página y puede tener el pie de página fijo sin importar si la página se está desplazando hacia abajo.
Solución técnica - EDITADO
Históricamente, la 'altura' es algo complicado de moldear, en comparación con el 'ancho', el más fácil. Dado que css se centra en <body>para que el estilo funcione. El código de arriba - le dimos <html>y <body>una altura. Aquí es donde la magia entra en escena: dado que tenemos 'altura mínima' en la mesa de juego, le estamos diciendo al navegador que <body>es superior <html>porque <body>mantiene la altura mínima. Esto a su vez, permite <body>anular <html>porque ya <html>tenía altura antes. En otras palabras, estamos engañando al navegador para que "salte" <html>de la mesa, de modo que podamos diseñar de forma independiente.
min-heighty height?
<body>para que el estilo funcione. Este código: le dimos <html>y <body>una altura. Aquí es donde la magia entra en escena: dado que tenemos 'altura mínima' en la mesa de juego, le estamos diciendo al servidor que <body>es superior <html>porque <body>mantiene la altura mínima. Esto a su vez, permite <body>anular <html>porque ya <html>tenía altura antes. En otras palabras, estamos engañando al servidor para que "salte" <html>de la mesa, para que podamos diseñar de forma independiente.
Puede usar vh en la propiedad min-height.
min-height: 100vh;Puede hacer lo siguiente, dependiendo de cómo esté usando los márgenes ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementLa solución aceptada no funcionará realmente. Usted se dará cuenta de que el contenido divserá igual a la altura de su padre, body. Por lo tanto, establecer la bodyaltura en 100%lo establecerá igual a la altura de la ventana del navegador. Digamos que la ventana del navegador estaba 768pxen altura, al establecer la divaltura del contenido en 100%, la divaltura del 'será a su vez 768px. Por lo tanto, terminará con el div del encabezado 150pxy el div de contenido 768px. Al final, tendrá contenido 150pxdebajo de la parte inferior de la página. Para otra solución, consulte este enlace.
Con HTML5 puedes hacer esto:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML:
<header>blabablalba </header>
<section> Content </section>Para mí, el siguiente funcionó bien:
Envolví el encabezado y el contenido en un div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>Usé esta referencia para llenar la altura con flexbox. El CSS es así:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Para obtener más información sobre la técnica flexbox, visite la referencia
También puede configurar el padre en display: inline. Ver http://codepen.io/tommymarshall/pen/cECyH
Asegúrese también de tener la altura de html y body configurada al 100%.
La respuesta aceptada no funciona. Y la respuesta más votada no responde a la pregunta real. Con un encabezado de altura de píxel fija y un relleno en la pantalla restante del navegador, y desplácese para ver el flujo. Aquí hay una solución que realmente funciona, usando posicionamiento absoluto. También supongo que se conoce la altura del encabezado, por el sonido de "encabezado fijo" en la pregunta. Yo uso 150px como ejemplo aquí:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS: (agregando color de fondo solo para efectos visuales)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}Para una vista más detallada de cómo funciona esto, con contenido real dentro del #Content, eche un vistazo a este jsfiddle , usando filas y columnas de arranque.
bottompropiedad se aseguró de que las #Contentestancias se atasquen al final de la página. Le agradezco que se haya tomado el tiempo de explicarlo.
En este caso, quiero que mi div de contenido principal sea de altura líquida para que toda la página ocupe el 100% de la altura del navegador.
height: 100vh;
Permítame agregar mis 5 centavos aquí y ofrecer una solución clásica:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Esto funcionará en todos los navegadores, sin script, sin flex. Abra el fragmento en el modo de página completa y cambie el tamaño del navegador: las proporciones deseadas se conservan incluso en el modo de pantalla completa.
idHeader.heighty idContent.topse ajustan para incluir el borde, y deben tener el mismo valor si no se utiliza el borde. De lo contrario, los elementos saldrán de la ventana gráfica, ya que el ancho calculado no incluye borde, margen y / o relleno.left:0; right:0; puede ser reemplazado por width:100% por la misma razón, si no se usa un borde.padding-topy / o
padding-bottomatributos al #idOuterelemento.Para completar mi respuesta, aquí está el diseño del pie de página:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Y aquí está el diseño con encabezado y pie de página:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>A menos que necesite ser compatible con IE 9 y versiones anteriores, usaría flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }También necesitas que el cuerpo ocupe toda la página.
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS PLaY | Encabezado / pie de página fijo en varios navegadores / diseño de columna única centrado
CSS Frames, versión 2: Ejemplo 2, ancho especificado | 456 Calle Berea
Una cosa importante es que, aunque esto suena fácil, habrá un poco de código desagradable en su archivo CSS para obtener un efecto como este. Desafortunadamente, realmente es la única opción.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}La mejor solución que encontré hasta ahora es establecer un elemento de pie de página en la parte inferior de la página y luego evaluar la diferencia entre el desplazamiento del pie de página y el elemento que necesitamos expandir. p.ej
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');También es posible que desee actualizar la altura del elemento de contenido en cada cambio de tamaño de ventana, así que ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});¿Has intentado algo como ésto?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>