Haga que un div llene la altura del espacio restante de la pantalla

Estoy trabajando en una aplicación web en la que quiero que el contenido ocupe la altura de toda la pantalla.

La página tiene un encabezado, que contiene un logotipo e información de la cuenta. Esta podría ser una altura arbitraria. Quiero que el div de contenido llene el resto de la página hasta el final.

Tengo un encabezado div y un contenido div. En este momento estoy usando una tabla para el diseño así:

CSS y HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Se llena toda la altura de la página y no es necesario desplazarse.

Para cualquier cosa dentro del div de contenido, estableciendo top: 0; lo pondrá justo debajo del encabezado. A veces, el contenido será una tabla real, con su altura configurada al 100%. Poniendo header dentro content no permitirá que esto funcione.

¿Hay alguna manera de lograr el mismo efecto sin usar el table?

Actualizar:

Elementos dentro del contenido div también tendrá las alturas en porcentajes. Entonces, algo al 100% dentro del div lo llenará hasta el fondo. Al igual que dos elementos al 50%.

Update 2:

Por ejemplo, si el encabezado ocupa el 20% de la altura de la pantalla, una tabla especificada al 50% dentro #content ocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una tabla es lo único que funciona.

preguntado el 18 de septiembre de 08 a las 03:09

Para cualquiera que se tropiece aquí en el futuro, puede obtener el diseño de tabla deseado en la mayoría de los navegadores, sin el marcado de tabla, utilizando display:table y propiedades relacionadas, consulte esta respuesta a una pregunta muy similar. -

He intentado volver a crear tu configuración. jsfiddle.net/ceELs - pero no funciona, ¿qué me he perdido? -

@Señor. La respuesta de Alien es simple y útil, compruébalo http://stackoverflow.com/a/23323175/188784 -

En realidad, lo que describe no funciona, incluso con tablas: si el contenido ocupa más espacio vertical que la altura de la pantalla, la celda de la tabla y toda la tabla se expandirán más allá de la parte inferior de la pantalla. El desbordamiento de su contenido: auto no hará que aparezca una barra de desplazamiento. -

@GillBates, funcionará después de que especifique la altura del elemento principal. jsfiddle.net/ceELs/5 -

30 Respuestas

Actualización de 2015: el enfoque de flexbox

Hay otras dos respuestas que mencionan brevemente flexbox; sin embargo, eso fue hace más de dos años y no proporcionan ningún ejemplo. La especificación para flexbox definitivamente se ha asentado ahora.

Nota: Aunque la especificación CSS Flexible Boxes Layout se encuentra en la etapa de recomendación candidata, no todos los navegadores la han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión antigua de la especificación, con el prefijo -ms-; Opera 12.10 implementa la última versión de la especificación, sin prefijo. Consulte la tabla de compatibilidad de cada propiedad para conocer el estado de compatibilidad actualizado.

(tomado de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

Todos los principales navegadores e IE11 + son compatibles con Flexbox. Para IE 10 o más, puede usar la cuña FlexieJS.

Para comprobar el soporte actual, también puede ver aquí: http://caniuse.com/#feat=flexbox

Ejemplo de trabajo

Con flexbox puede cambiar fácilmente entre cualquiera de sus filas o columnas, ya sea que tengan dimensiones fijas, dimensiones del tamaño del contenido o dimensiones del espacio restante. En mi ejemplo, configuré el encabezado para que se ajustara a su contenido (según la pregunta de OP), agregué un pie de página para mostrar cómo agregar una región de altura fija y luego configuré el área de contenido para llenar el espacio restante.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

En el CSS anterior, el flexionar la propiedad abrevia la flex-grow, encogimiento flexibley base flexible propiedades para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una buena introducción al modelo de cajas flexibles.

contestado el 31 de mayo de 20 a las 21:05

Porqué el flex: 0 1 30px; atributo en box .row como se anula en cada div? - Erdal G.

Aquí está el soporte del navegador para flexbox - es bueno ver todo eso verde - caniuse.com/#feat=flexbox - Brian Burns,

El enlace a Flexie.js está muerto. Aquí el proyecto github github.com/doctyper/flexie - sesión3

Definitivamente es un enfoque muy bueno y casi funciona;) Hay un pequeño problema cuando un contenido de div.content excede una altura original flex-ed. En la implementación actual, el "pie de página" se empujará hacia abajo y esto no es lo que los desarrolladores esperan;) Así que hice una solución muy fácil. jsfiddle.net/przemcio/xLhLuzf9/3 Agregué flexión adicional en el contenedor y el desplazamiento de desbordamiento. - complacer

@przemcio buen punto, pero no creo que tener contenido desplazable sea lo que todos los desarrolladores esperan;) - solo debes agregar overflow-y: auto a .row.content para lograr lo que necesita sin embargo. - Guijarro

Realmente no hay una forma sólida y entre navegadores de hacer esto en CSS. Suponiendo que su diseño tiene complejidades, debe usar JavaScript para establecer la altura del elemento. La esencia de lo que debe hacer es:

Element Height = Viewport height - element.offset.top - desired bottom margin

Una vez que pueda obtener este valor y establecer la altura del elemento, debe adjuntar controladores de eventos tanto al onload como al onresize de la ventana para que pueda activar su función de cambio de tamaño.

Además, asumiendo que su contenido podría ser más grande que la ventana gráfica, deberá configurar overflow-y para desplazarse.

Respondido el 03 de Septiembre de 13 a las 18:09

Eso es lo que sospechaba. Sin embargo, la aplicación también funcionará con Javascript desactivado, así que supongo que seguiré usando la tabla. - Vicente McNabb

Vincent, manera de defender tu posición. Estaba buscando hacer exactamente lo mismo y parece que no es posible con css. No estoy seguro, pero independientemente de que ninguna de las otras toneladas de soluciones haga lo que ha descrito. El javascript es el único que funciona correctamente en este momento. - Travis

¿Qué pasa si la altura de la ventana cambia? Techsin

Quiero decir ... ¿por qué no usamos calc en 2013? - Kamii

altura: calc (100vh - 400px); es un estilo CSS válido que hace exactamente de lo que trata esta publicación. Todas las demás soluciones se basan en tener una pantalla de bloque o una altura principal fija. - GuillermoX

La publicación original es de hace más de 3 años. Supongo que muchas personas que vienen a esta publicación como yo están buscando una solución de diseño similar a una aplicación, digamos un encabezado, pie de página y contenido de altura completa que ocupe el resto de la pantalla. Si es así, esta publicación puede ayudar, funciona en IE7 +, etc.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Y aquí hay algunos fragmentos de esa publicación:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

respondido 11 mar '18, 08:03

Solo hay un problema con esto: el encabezado y el pie de página no se ajustan automáticamente. Esa es la verdadera dificultad, y que es por eso que una respuesta "esto no es posible" se encuentra actualmente en la parte superior ... - romano starkov

Necesitaba un encabezado de 55px y un div que llena el resto de la altura del documento. esta es la solucion! - matias canepa

Tú eres la bomba, he estado intentando esto durante tanto tiempo y esta es la única solución que encontré. Necesitaba que mi elemento de navegación tuviera una altura de 60 píxeles en la parte superior y el resto se extendiera al 100%, esto lo resolvió. - Adán Waite

Esto funciona bien, excepto que tengo un pequeño problema, si coloco un elemento con display: table en el cuerpo, parece desbordar el cuerpo. Tan haciendo height: 100% no produce la altura correcta. - ESTRELLA G

.col no se usa, ¿verdad? - Slartidan

En lugar de usar tablas en el marcado, puede usar tablas CSS.

Marcado

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevante) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

VIOLÍN1 y VIOLÍN2

Algunas ventajas de este método son:

1) Menos marcado

2) El marcado es más semántico que las tablas, porque no se trata de datos tabulares.

3) La compatibilidad con el navegador es muy bien: IE8 +, todos los navegadores y dispositivos móviles modernos (Puedo usar)


Solo para completar, aquí están los elementos Html equivalentes a las propiedades css para el El modelo de tabla CSS

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

Respondido 13 Abr '16, 15:04

Me acabo de señalar la técnica de las tablas css. Resulta que la respuesta ya estaba en esta pregunta respondida. Esto es el mejor solución; limpio, elegante y usando la herramienta exacta de la manera exacta para la que fue diseñada. Tablas CSS - Ian Boyd

El código del violín no coincide con la respuesta aquí. Añadiendo html, body { height: 100%, width: 100% } Parecía crítico en mis pruebas. - mlibby

Una característica molesta de las tablas CSS es exactamente la misma que con las tablas normales: si el contenido es demasiado grande, expanden la celda para que quepa. Esto significa que es posible que aún deba limitar el tamaño (altura máxima) o establecer la altura desde el código si la página es dinámica. ¡Realmente extraño las rejillas de Silverlight! :( - Codificación ido

Siempre puede agregar un contenedor absolutamente posicionado dentro del elemento de fila de la tabla y luego establecer su ancho y alto al 100%. Recuerde también establecer la posición en relativa en el elemento de fila de tabla. - mike mellor

@MikeMellor no funciona en IE11, ya que parece ignorar relative posicionamiento en table-row elemento, por lo que toma la altura del ascendente posicionado en primer lugar que no es un elemento de tabla. - morar

Enfoque solo CSS (si la altura es conocida / fija)

Cuando desee que el elemento del medio se extienda por toda la página verticalmente, puede utilizar calc() que se introduce en CSS3.

Suponiendo que tenemos un altura fija header y footer elementos y queremos el section etiqueta para tomar toda la altura vertical disponible ...

Demo

Marcado asumido y tu CSS debería ser

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Así que aquí, lo que estoy haciendo es sumar la altura de los elementos y luego deducir de 100% usar calc() función.

Solo asegúrate de usar height: 100%; para los elementos principales.

Respondido 05 Feb 20, 20:02

El OP dijo que el encabezado podría tener una altura arbitraria. Entonces, si no conoce la altura de antemano, no podrá usar calc :( - danield

@Danield Por eso he mencionado altura fija :) - Sr. Alien

Esta es la solución que funcionó para mí y no requirió que rediseñara mis páginas existentes alrededor de flexboxes. Si está utilizando MENOS, es decir, Bootstrap, asegúrese de leer el muro de codificación publicar sobre cómo escapar de la función calc () para que MENOS no lo maneje. - jlyonsmith

Op dijo 'Esto podría ser una altura arbitraria'. Medios arbitrarios decididos por el diseñador, así fijados. Esta solución es, con mucho, la mejor. - Jck

Usado: height: calc(100vh - 110px);

código:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

contestado el 22 de mayo de 16 a las 04:05

Esta es, con mucho, la más fácil de todas las soluciones enumeradas en esta página: millas m

Una solución simple, usando flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Ejemplo de Codepen

Una solución alternativa, con un div centrado dentro del div de contenido

Respondido 08 Abr '19, 16:04

Seguro que esta es la mejor respuesta. Funciona como un amuleto para las páginas de inicio de hero-img, o una combinación de hero-img con su barra de navegación - noobcoderiam

jsfiddle.net/31ng75du/5 Probado con Chrome, FF, Edge, Vivaldi - user2360831

¿Qué tal si simplemente usa vh Lo que significa view height in CO...

Mira el fragmento de código Creé para ti a continuación y lo ejecuté:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Además, mire la imagen a continuación que creé para usted:

Haga que un div llene la altura del espacio restante de la pantalla

Respondido el 01 de junio de 18 a las 06:06

Eso solo es bueno si desea que un div abarque toda la altura de la ventana. Ahora coloque un div de encabezado encima con una altura desconocida. - larrybud

@LarryBud tienes razón, esto hace que el contenedor sea div, por lo que todo debería ir dentro de este div ... - Alireza

CSS3 de forma sencilla

height: calc(100% - 10px); // 10px is height of your first div...

Todos los navegadores principales en estos días lo admiten, así que continúe si no tiene el requisito de admitir navegadores antiguos.

respondido 11 mar '18, 16:03

Esto no funciona si no conoce la altura de los otros elementos (por ejemplo, si contienen un número variable de elementos secundarios). - Ege Ersoz

también puede usar 100vh, cualquiera que haga esto: asegúrese de poner espacios entre el signo menos y los elementos - htafoya

Es mejor con el uso 100vh, luego reste el encabezado, por lo que calc(100vh - 10px). - martavis p.

Podría ser hecho puramente por CSS usar vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

y HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

Lo revisé, funciona en todos los navegadores principales: Chrome, IEy FireFox

Respondido 21 Jul 19, 14:07

Wow, nunca escuché de vh y vw unidades antes. Más información: snook.ca/archives/html_and_css/vm-vh-unidades - Steve Bennett

Desafortunadamente, esto no es compatible con IE8 :( - Scott

Probé este enfoque, pero el height: 100% on #content hizo que su altura coincidiera con la de #page, ignorando #tdcontentla altura en total. Con una gran cantidad de contenido, la barra de desplazamiento se extiende más allá de la parte inferior de la página. - Brandon

Ninguna de las soluciones publicadas funciona cuando necesita que el div inferior se desplace cuando el contenido es demasiado alto. Aquí hay una solución que funciona en ese caso:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Fuente original: llenado de la altura restante de un contenedor mientras se maneja el desbordamiento en CSS

Vista previa en vivo de JSFiddle

Respondido 05 Feb 20, 18:02

¡¡¡Gracias!!! Probé todas las respuestas que no son de tabla ni de caja flexible, y esta es la única que funcionó al 100% correctamente. Una pregunta: la fuente original solo tiene un body-content-wrapper, y las cosas parecen funcionar bien sin el envoltorio doble (sin ningún table-cells). ¿Hay algún problema con hacerlo de esa manera? - Brandon

@BrandonMintern Si no tiene las celdas de la tabla, no funciona en IE8 e IE9. (Ver comentario en artículo original.) - Juan Kurlak

Sí, las celdas también son necesarias en IE10. Desafortunadamente, en IE10 y menos, el .body la altura termina siendo la misma altura que la establecida en .container. La barra de desplazamiento vertical todavía está en el lugar correcto, pero la .container termina estirándose más de lo que queremos. Cuando está en pantalla completa, la parte inferior de .body está fuera de la parte inferior de la pantalla. - Brandon

Gracias, @JohnKurlak. Es la única solución que funcionó en mi situación (la forma de flexbox fue bloqueada por un comportamiento defectuoso en una versión particular de Chrome utilizada por mi cliente) - Maksym Demidas

¡Santo cielo! ¡He estado buscando esta respuesta durante tanto tiempo! Muchas gracias. Flexbox no funcionó aquí, pero las celdas de tabla sí lo hicieron. Increíble. - alistair

También he estado buscando una respuesta para esto. Si tiene la suerte de poder apuntar a IE8 y superior, puede usar display:table y valores relacionados para obtener las reglas de representación de tablas con elementos a nivel de bloque, incluido div.

Si tiene aún más suerte y sus usuarios utilizan navegadores de primer nivel (por ejemplo, si esta es una aplicación de intranet en las computadoras que controla, como mi último proyecto), puede usar el nuevo Diseño de caja flexible en CSS3!

Respondido el 26 de diciembre de 17 a las 19:12

Lo que funcionó para mí (con un div dentro de otro div y supongo que en todas las demás circunstancias) es establecer el relleno inferior al 100%. Es decir, agregue esto a su CSS / hoja de estilo:

padding-bottom: 100%;

Respondido 31 Oct 13, 10:10

100% de que? Si intento esto, obtengo un gran espacio en blanco y el desplazamiento comienza a suceder. - mlibby

El 100% del tamaño de la ventana gráfica puede ser @mlibby. Si también configura su html y su cuerpo al 100% de altura, entonces el div puede ir al 100%. Con un solo div, el 100% será relativo al contenido de div. No lo intenté con un div anidado. - Cadena

Significa el 100% de la altura del elemento (agregado como relleno del elemento), lo que hace que duplique la altura. No hay garantía de que llene la página y, definitivamente, no sea la respuesta a la pregunta. Es posible que, como ya no se haya establecido, llene más que la ventana gráfica. - Martin

padding-bottom: 100% establece la altura + 100% del contenedor principal anchura - rumano

from w3school: especifica un relleno inferior en porcentaje del ancho del elemento. w3schools.com/cssref/pr_padding-bottom.asp - mehdi.loa

Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero la encuentro un poco hinchada con una envoltura innecesaria y reglas css. A continuación se muestra una solución con muy pocas reglas CSS.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CO

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Solución anterior utiliza unidades de ventana gráfica y flexbox, y por lo tanto es IE10 +, siempre que use la sintaxis antigua para IE10.

Codepen para jugar: enlace a codepen

O este, para aquellos que necesitan que el contenedor principal sea desplazable en caso de contenido desbordado: enlace a codepen

Respondido el 03 de enero de 16 a las 17:01

principal {altura: 10px; flexión: 1; desbordamiento: auto} - Naeem Baghi

Después de perder horas y probar varios enfoques, ¡este fue el mejor! Es conciso, simple e inteligente. - marciowb

Hay un montón de respuestas ahora, pero encontré usando height: 100vh; para trabajar en el elemento div que necesita llenar todo el espacio vertical disponible.

De esta manera, no necesito jugar con la pantalla o el posicionamiento. Esto fue útil cuando usé Bootstrap para hacer un tablero en el que tenía una barra lateral y una principal. Quería que la línea principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.

div {
    height: 100vh;
}

Soporta IE9 y superior: haga clic para ver el enlace

Respondido 19 Feb 19, 17:02

Pero 100vh suena como toda la altura, no como la altura restante. ¿Qué pasa si tienes un encabezado y luego quieres llenar el resto? epirocks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

En todos los navegadores cuerdos, puede poner el div "encabezado" antes del contenido, como hermano, y el mismo CSS funcionará. Sin embargo, IE7- no interpreta la altura correctamente si el flotador es 100% en ese caso, por lo que el encabezado debe estar DENTRO del contenido, como se indicó anteriormente. El desbordamiento: automático causará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la ventana gráfica visible, pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.

Respondido el 18 de Septiembre de 08 a las 07:09

¡Cerca! Casi lo que quiero, excepto que voy a tener otras cosas colocadas en el div... es decir top: 0; pondrá algo justo debajo del encabezado. Volveré a modificar mi pregunta, porque la respondiste perfectamente, ¡y aún no es lo que quiero! Solo ocultaré el desbordamiento ya que el contenido debe encajar. - Vicente McNabb

-1: esta respuesta crea un div llamado contenido que cubre toda la pantalla, no la resto de la pantalla - Casebash

Si puede lidiar con no admitir navegadores antiguos (es decir, MSIE 9 o anterior), puede hacerlo con Módulo de diseño de caja flexible que ya es W3C CR. Ese módulo también permite otros buenos trucos, como reordenar el contenido.

Desafortunadamente, MSIE 9 o versiones inferiores no son compatibles con esto y debe usar el prefijo de proveedor para la propiedad CSS para todos los navegadores que no sean Firefox. Es de esperar que otros proveedores también eliminen el prefijo pronto.

Otra opción sería Diseño de cuadrícula CSS pero eso tiene incluso menos soporte de versiones estables de navegadores. En la práctica, solo MSIE 10 lo admite.

Actualización año 2020: Todos los navegadores modernos admiten ambos display: flex y display: grid. El único que falta es el soporte para subgrid que solo es compatible con Firefox. Tenga en cuenta que MSIE no es compatible con la especificación, pero si está dispuesto a agregar hacks CSS específicos de MSIE, se puede hacer que se comporte. Sugeriría simplemente ignorar MSIE porque incluso Microsoft dice que ya no debería usarse.

Respondido el 04 de junio de 20 a las 08:06

Solución de cuadrícula CSS

Simplemente definiendo el body con display:grid y grid-template-rows usar auto y fr propiedad de valor.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Una guía completa de Grids @ CSS-Tricks.com

Respondido 04 Jul 17, 15:07

Luché con esto por un tiempo y terminé con lo siguiente:

Dado que es fácil hacer que el contenido DIV tenga la misma altura que el padre, pero aparentemente es difícil convertirlo en la altura del padre menos la altura del encabezado, decidí hacer que el contenido sea div a la altura completa, pero colóquelo absolutamente en la esquina superior izquierda y luego defina un relleno. para la parte superior que tiene la altura de la cabecera. De esta manera, el contenido se muestra ordenadamente debajo del encabezado y llena todo el espacio restante:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

Respondido 31 Oct 13, 10:10

¿Qué pasa si no conoce la altura del encabezado? - Jindle yugal

¿Por qué no simplemente así?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

¿Darle html y body (en ese orden) una altura y luego simplemente dar una altura a sus elementos?

Funciona para mi

Respondido 22 Oct 13, 01:10

El caso es que si un usuario usa una pantalla grande para revisar esta página y la altura de su encabezado se fija exactamente 100px, que es menor que el 40% de la altura actual, habrá un gran espacio en blanco entre su encabezado y el contexto del cuerpo. - Saorikido

 style="height:100vh"

resolvió el problema por mí. En mi caso, apliqué esto al div requerido

respondido 23 mar '18, 10:03

Realmente puedes usar display: table para dividir el área en dos elementos (encabezado y contenido), donde el encabezado puede variar en altura y el contenido llena el espacio restante. Esto funciona con toda la página, así como cuando el área es simplemente el contenido de otro elemento posicionado con position establecido en relative, absolute or fixed. Funcionará siempre que el elemento padre tenga una altura distinta de cero.

Mira este violín y también el siguiente código:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

Respondido 01 ago 13, 15:08

Una buena respuesta, que voté a favor, pero desafortunadamente, no funciona con IE8, que seguirá existiendo durante mucho tiempo. - Vicente McNabb

Las aplicaciones como Gmail usan Javascript para el tamaño, que es una mejor solución que CSS en la mayoría de los casos de todos modos. - Vicente McNabb

Creo que están usando Javascript porque no hay otra buena solución CSS entre navegadores, no porque sea mejor. - Greg

@VincentMcNabb funciona en IE8 w3schools.com/cssref/pr_class_display.asp. Solo requiere la declaración! DOCTYPE. Ni siquiera sabía acerca de un valor de tabla para el atributo de visualización. Solución fría. +1 - govind rai

Vincent, te responderé de nuevo usando tus nuevos requisitos. Como no le importa que el contenido se oculte si es demasiado largo, no es necesario que flote el encabezado. Simplemente coloque overflow oculto en las etiquetas html y body, y configure #content altura al 100%. El contenido siempre será más largo que la ventana gráfica por la altura del encabezado, pero estará oculto y no generará barras de desplazamiento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Respondido 21 ago 14, 00:08

Ya pensé en esto. Pero tampoco funciona. Solo me voy a quedar con un table porque funciona. Aún así gracias por la actualización. - Vicente McNabb

En Bootstrap:

Estilos CSS:

html, body {
    height: 100%;
}

1) Simplemente llene la altura del espacio restante de la pantalla:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [ingrese la descripción de la imagen aquí


2) llene la altura del espacio restante de la pantalla y alinee el contenido con la mitad del elemento principal:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [ingrese la descripción de la imagen aquí

Respondido 10 Abr '20, 09:04

Prueba esta

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

Respondido 31 Oct 13, 10:10

Para la aplicación móvil, uso solo VH y VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo https://jsfiddle.net/u763ck92/

Respondido 01 Feb 17, 15:02

Ésta no es la solución adecuada. vh es inconsistente en los navegadores móviles. Consulte aquí para obtener más detalles: stackoverflow.com/questions/37112218/… - Áspero malvavisco

Esta es mi propia versión mínima de la solución de Pebbl. Tomó una eternidad encontrar el truco para que funcione en IE11. (También probado en Chrome, Firefox, Edge y Safari).

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div:first-child {
  background: gold;
}

div:last-child {
  background: plum;
  flex-grow: 1;
}
<body>
  <section>
    <div>FIT</div>
    <div>GROW</div>
  </section>
</body>

Respondido 12 Feb 21, 10:02

Encontré una solución bastante simple, porque para mí era solo una cuestión de diseño. Quería que el resto de la página no fuera blanco debajo del pie de página rojo. Así que configuré el color de fondo de las páginas en rojo. Y el contenido backgroundcolor a blanco. Con la altura del contenido establecida en, por ejemplo. 20em o 50% una página casi vacía no dejará toda la página roja.

Respondido el 14 de Septiembre de 12 a las 09:09

Tuve el mismo problema, pero no pude hacer funcionar la solución con los flexboxes anteriores. Así que creé mi propia plantilla, que incluye:

  • un encabezado con un elemento de tamaño fijo
  • un pie de página
  • una barra lateral con una barra de desplazamiento que ocupa la altura restante
  • contenido

Usé flexboxes pero de una manera más simple, usando solo propiedades pantalla: flex y dirección flexible: fila | columna:

Utilizo angular y quiero que los tamaños de mis componentes sean el 100% de su elemento principal.

La clave es establecer el tamaño (en porcentajes) de todos los padres con el fin de limitar su tamaño. En el siguiente ejemplo, myapp height tiene el 100% de la ventana gráfica.

El componente principal tiene el 90% de la ventana gráfica, porque el encabezado y el pie de página tienen el 5%.

Publiqué mi plantilla aquí: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

Respondido 25 ago 16, 17:08

Derivado de la idea del Sr. Alien ...

Esta parece una solución más limpia que la popular caja flexible para navegadores habilitados para CSS3.

Simplemente use min-height (en lugar de height) con calc () en el bloque de contenido.

Calc () comienza con 100% y resta alturas de encabezados y pies de página (es necesario incluir valores de relleno)

Usar "min-height" en lugar de "height" es particularmente útil para que pueda funcionar con contenido renderizado en javascript y marcos JS como Angular2. De lo contrario, el cálculo no empujará el pie de página al final de la página una vez que el contenido renderizado de JavaScript sea visible.

A continuación, se muestra un ejemplo sencillo de un encabezado y un pie de página con 50 píxeles de altura y 20 píxeles de relleno para ambos.

HTML:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Por supuesto, las matemáticas se pueden simplificar, pero entiendes la idea ...

Respondido el 13 de diciembre de 17 a las 11:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.