¿Cómo puede un elemento html llenar el 100% de la altura restante de la pantalla, usando solo css?

118

Tengo un elemento de encabezado y un elemento de contenido:

#header
#content

Quiero que el encabezado sea de altura fija y que el contenido llene toda la altura restante disponible en la pantalla, con overflow-y: scroll;.

¿Es esto posible sin Javascript?

html css Harry
fuente

83

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

BentOnCoding
fuente

1

Intenté todas las soluciones, pero solo esto resolvió mi problema.

Alex

1

@Alex, si esto funciona para todos los navegadores a los que se dirige, entonces, por supuesto, impleméntelo. Los requisitos de cada persona son diferentes.

BentOnCoding

321

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

fuente

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.

Sebastien H.
fuente

9

Esta es la respuesta más simple, ya que no necesita establecer la altura de todos los elementos principales al 100%. Aquí está el soporte actual para vh - caniuse.com/#feat=viewport-units - iOS aparentemente podría necesitar una solución, ya que "se informa que vh en iOS incluye la altura de la barra de herramientas inferior en el cálculo de la altura".

Brian Burns

2

¡GUAU, buen hallazgo! Mira a todas estas personas con respuestas demasiado complicadas.

NoName

8

Cuando se hizo la pregunta en 2011, ninguno de los principales navegadores admitía unidades de visualización. Esas "respuestas demasiado complicadas" eran las únicas opciones en ese entonces.

JJJ

6

Pequeña sugerencia de que min-height: 100vhsería mucho mejor. También se escalaría para diseños receptivos.

Wiggy A.

3

Esto no responde a la pregunta formulada, esto ocuparía el 100% de la ventana gráfica. No quiere esto porque su encabezado ocupará el x% de la ventana gráfica, por lo que las otras respuestas son correctas.

4cody

35

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.

Faron
fuente

1

¡Dios mío, es un milagro!

Geoff

¡Como un milagro, funciona! Pero por favor: ¿por qué min-heighty height?

Joy

1

@ShaojiangCai - 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. 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.

Faron

2

@Faron Parece que 'navegador' sería una mejor opción de palabra aquí en lugar de 'servidor'. ;)

LET

@EunLeem ... Estoy de acuerdo contigo en cómo pude haber elegido la redacción adecuada para abordar esto. Gracias por la sugerencia de "golpe de codo". Actualicé mi respuesta en consecuencia.

Faron

14

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 element

Almeida Cavalcante
fuente

10

La 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.

dykstrad
fuente

8

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>

Miguel
fuente

Tenga cuidado con el uso de cálculo en porcentaje de altura. Firefox no funcionará con esto correctamente a menos que todos los padres tengan una altura establecida.

TomDK

4

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

picador
fuente

1

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%.

tommymarshall
fuente

Se desaconsejan las respuestas de solo enlace. Intente resumir el contenido del enlace en su respuesta

Usuario que no es un usuario

1

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.

jumps4fun
fuente

"encabezado de altura de píxel fija" -> ¡esto exactamente! La 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.

Armfoot

1

Y estoy feliz de que haya ayudado a alguien;)

jumps4fun

1

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;

Fezal halai
fuente

1

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>

Expandir fragmento

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.

Nota:

Los elementos con diferentes colores de fondo pueden cubrirse entre sí. Aquí utilicé un borde sólido para asegurarme de que los elementos se colocan correctamente.
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.
La prueba en una página separada (no como un fragmento) no requiere ningún ajuste de html / body.
En IE6 y versiones anteriores debemos agregar 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>

Expandir fragmento

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>

Expandir fragmento

Dmitry Babich
fuente

0

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

James Lambert
fuente

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.

Joe
fuente

Se desaconsejan las respuestas de solo enlace. Intente incluir el código en su respuesta.

Usuario que no es usuario

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

Jazib Khan
fuente

-1

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

El archivo html

<div id="contents"></div>
<div id="footer"></div>

El archivo css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

El archivo js (usando jquery)

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

Αλέκος
fuente

-1

Muy simple:

#content {
    max-height: 100%;
}

Masood
fuente

-3

¿Has intentado algo como ésto?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

Rahul Choudhary
fuente

¿Cómo puede un elemento html llenar el 100% de la altura restante de la pantalla, usando solo css?

Respuestas:

Nota:

El archivo html

El archivo css

El archivo js (usando jquery)