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

1910

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

La página tiene un encabezado, que contiene un logotipo e información de la cuenta. Esto 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 divy un contenido div. En este momento estoy usando una tabla para el diseño de esta manera:

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 se requiere desplazamiento.

Para cualquier cosa dentro del contenido div, la configuración top: 0;lo colocará justo debajo del encabezado. A veces, el contenido será una tabla real, con su altura establecida al 100%. Poner headerdentro contentno permitirá que esto funcione.

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

Actualizar:

Los elementos dentro del contenido divtambién tendrán alturas establecidas en porcentajes. Entonces, algo al 100% dentro divlo llenará hasta el fondo. Como lo harán dos elementos al 50%.

Actualización 2:

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

Vincent McNabb
fuente
31
Para cualquier persona que tropiece aquí en el futuro, puede obtener el diseño de tabla deseado en la mayoría de los navegadores, sin el marcado de la tabla, mediante el uso de display:tablepropiedades relacionadas, consulte esta respuesta a una pregunta muy similar.
AmeliaBR
3
He intentado volver a crear su configuración, jsfiddle.net/ceELs , pero no funciona, ¿qué me falta?
Gill Bates
55
@Señor. La respuesta de Alien es simple y útil, échale un vistazo http://stackoverflow.com/a/23323175/188784
Gohan
44
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: automático no hará que aparezca una barra de desplazamiento.
Damien
@GillBates funcionará después de que especifique la altura del elemento primario mire en jsfiddle.net/ceELs/5
Michal Vašut

Respuestas:

1116

Actualización 2015: el enfoque 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 establecido ahora.

Nota: Aunque la especificación de diseño de cuadros flexibles de CSS se encuentra en la etapa de recomendación del candidato, no todos los navegadores la han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión anterior 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 obtener un 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 anterior, puede usar la cuña FlexieJS.

Para consultar 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 que tengan dimensiones fijas, dimensiones del tamaño del contenido o dimensiones del espacio restante. En mi ejemplo, configuré el encabezado para que se ajuste a su contenido (según la pregunta de los 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, los flex taquigrafías propiedad del flex-Grow , flex-contracción y flexible básicos propiedades para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una buena introducción al modelo de cajas flexibles .

Pebbl
fuente
99
¿Por qué el flex: 0 1 30px;atributo en box .rowcomo se anula en cada div?
Erdal G.
11
Aquí está el soporte del navegador para flexbox - es bueno ver todo eso verde - caniuse.com/#feat=flexbox
Brian Burns
1
El enlace a Flexie.js está muerto. Aquí el proyecto github github.com/doctyper/flexie
ses3ion
52
Definitivamente es un enfoque muy bueno y casi funciona;) Existe un pequeño problema cuando un contenido de contenido div. Supera una altura flexionada original. En la implementación actual, el "pie de página" se reducirá y esto no es lo que esperan los desarrolladores;) 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.
przemcio
12
@przemcio buen punto, pero no creo que tenga contenido desplazable es lo que cada desarrollador Espera;) - que sólo tendrá que añadir overflow-y: autoa .row.contentlograr lo que sin embargo es necesario.
Pebbl
226

Realmente no hay una forma de sonido cruzada para 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 necesitas 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 a la ventana onload y onresize para que pueda activar su función de cambio de tamaño.

Además, suponiendo que su contenido pueda ser más grande que la ventana gráfica, necesitará configurar overflow-y para desplazarse.

NICCAI
fuente
2
Eso es lo que sospechaba. Sin embargo, la aplicación también funcionará con Javascript desactivado, así que supongo que seguiré usando la tabla.
Vincent McNabb
66
Vincent, forma de mantenerte firme. Estaba buscando hacer exactamente lo mismo y parece que no es posible con CSS? No estoy seguro, pero independientemente de ninguna de las otras toneladas de soluciones hacen lo que has descrito. El javascript es el único que funciona correctamente en este momento.
Travis
55
¿Qué pasa si la altura de la ventana cambia?
Techsin
44
Quiero decir ... ¿por qué no estamos usando calc en 2013?
kamii
44
altura: calc (100vh - 400px); es un estilo CSS válido que hace exactamente de qué se trata esta publicación. Todas las demás soluciones se basan en tener una altura principal fija o una pantalla de bloque.
WilliamX
167

La publicación original es 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 de alguna manera ocupan la pantalla de descanso. 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>

h - n
fuente
74
Solo hay un problema con esto: el encabezado y el pie de página no tienen el tamaño automático. Esa es la verdadera dificultad, y que es la razón por la que "no es posible" respuesta es actualmente en la parte superior ...
Romano Starkov
Necesitaba un encabezado de 55 px y un div que llene el resto de la altura del documento. Esta es la solución!
Matías Cánepa
Eres la bomba, he estado intentando esto durante mucho tiempo y esta es la única solución que encontré. Necesitaba que mi elemento de navegación tuviera una altura de 60 px en la parte superior y el resto para abarcar el 100%, esto lo resolvió.
Adam Waite
Esto funciona bien, excepto que tengo un pequeño problema: si coloco un elemento display: tableen el cuerpo, parece desbordarlo. Hacerlo height: 100%no produce la altura correcta.
GSTAR
44
.colno se usa, ¿verdad?
slartidan
143

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

Margen

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

(Relevante) CSS

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

FIDDLE1 y FIDDLE2

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) El soporte del navegador es muy bueno : IE8 +, todos los navegadores modernos y dispositivos móviles ( caniuse )


Solo para completar, aquí están los elementos HTML equivalentes a las propiedades css para 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 } 
Danield
fuente
3
Acabo de señalar la técnica de las tablas CSS . Resulta que la respuesta ya estaba en esta pregunta contestada. Esta es la mejor solución; limpio, elegante y usando la herramienta exacta de la manera exacta que se pretendía. Tablas CSS
Ian Boyd
El código de violín no coincide con la respuesta aquí. Agregar html, body { height: 100%, width: 100% }parecía crítico en mis pruebas.
mlibby el
8
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 aún puede necesitar 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! :(
Gone Coding
3
Siempre puede agregar un contenedor en posición absoluta dentro del elemento de fila de tabla y luego establecer su ancho y alto al 100%. Recuerde establecer la posición como relativa en el elemento de fila de tabla también.
Mike Mellor
1
@MikeMellor no funciona en IE11, ya que parece ignorar el relativeposicionamiento en el table-rowelemento, por lo que toma la altura del ascendente en la primera posición que no es un elemento de tabla.
Habita el
96

Aproximación solo CSS (si la altura es conocida / fija)

Cuando desee que el elemento central abarque toda la página verticalmente, puede usar el calc()que se introduce en CSS3.

Suponiendo que tenemos una altura header y footerelementos fijos y queremos que la sectionetiqueta tome toda la altura vertical disponible ...

Manifestación

Supuesto marcado y su CSS debe 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>

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

Solo asegúrese de usarlo height: 100%;para los elementos principales.

Señor extranjero
fuente
13
El OP dijo que el encabezado podría ser una altura arbitraria. Entonces, si no conoce la altura de antemano, no podrá usar calc :(
Danield
1
@Danield Por eso he mencionado la altura fija :)
Sr. Alien
3
Esta es la solución que funcionó para mí y no me obligó a rediseñar mis páginas existentes alrededor de flexboxes. Si está utilizando LESS, es decir Bootstrap, asegúrese de leer la publicación de coderwall sobre cómo escapar de la función calc () para que LESS no lo maneje.
jlyonsmith
1
Op dijo 'Esto podría ser una altura arbitraria'. Medios arbitrarios decididos por el diseñador, así arreglados. Esta solución es, con mucho, la mejor.
jck
57

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>

nguyên
fuente
1
En mi opinión, la solución más limpia. Es mejor que agregar javascript, seguro. (pero la respuesta ya fue publicada en 2015 por otra persona)
bvdb
Esto se siente mucho más limpio.
theprogrammer
45

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>

Codepen muestra

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

zok
fuente
44
Esta es la mejor respuesta con seguridad. Funciona como un encanto para las páginas de inicio de hero-img, o un combo de hero-img con su barra de navegación
noobcoderiam
jsfiddle.net/31ng75du/5 Probado con Chrome, FF, Edge, Vivaldi
usuario2360831
Esto es simple y mejor.
Dev Anand
38

¿Qué tal sólo tiene que utilizar vhlo que significa view heighten CSS ...

Mira el fragmento de código que creé para ti a continuación y ejecútalo:

body {
  padding: 0;
  margin: 0;
}

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

Además, mira la imagen a continuación que creé para ti:

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

Alireza
fuente
10
Eso solo es bueno si desea que un div abarque toda la altura de la ventana. Ahora coloque un encabezado div encima de él con una altura desconocida.
LarryBud
@LarryBud tienes razón, esto hace que el contenedor se divida, por lo que todo debería ir dentro de este div ...
Alireza
34

CSS3 manera simple

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

todos los principales navegadores de estos días lo admiten, así que adelante si no tiene el requisito de admitir navegadores antiguos.

dev.meghraj
fuente
44
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 menos y los elementos
htafoya
28

Se podría hacer simplemente CSSusando 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 el HTML

<div id="page">

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

</div>

Lo he comprobado, Funciona en todos los principales navegadores: Chrome, IEyFireFox

Ormoz
fuente
2
Wow, nunca he oído hablar de unidades vhy vwantes. Más información: snook.ca/archives/html_and_css/vm-vh-units
Steve Bennett
Desafortunadamente, esto no es compatible con IE8 :(
Scott
2
Intenté este enfoque, pero el height: 100%encendido #contentcausó que su altura coincidiera con la de #page, ignorando #tdcontentpor completo la altura. Con mucho contenido, la barra de desplazamiento se extiende más allá de la parte inferior de la página.
Brandon
28

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: llenar la altura restante de un contenedor mientras se maneja el desbordamiento en CSS

Vista previa en vivo de JSFiddle

John Kurlak
fuente
¡¡¡Gracias!!! Intenté todas las respuestas que no son de tabla ni flexbox, y esta es la única que funcionó 100% correctamente. Una pregunta: la fuente original solo tiene un body-content-wrapper, y las cosas parecen funcionar bien sin el doble envoltorio (sin ningún table-cells). ¿Hay algún problema al hacerlo de esa manera?
Brandon
1
@BrandonMintern Si no tiene las celdas de la tabla, no funciona en IE8 e IE9. (Ver comentario en artículo original.)
John Kurlak
Sí, las celdas también son necesarias en IE10. Desafortunadamente, en IE10 y menores, la .bodyaltura termina siendo la misma altura que la configurada .container. La barra de desplazamiento vertical todavía está en el lugar correcto, pero al .containerfinal se estira más de lo que queremos. Cuando está en pantalla completa, la parte inferior .bodyestá 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 ****! ¡He estado buscando esta respuesta por mucho tiempo! Muchas gracias. Flexbox no funcionó aquí, pero las celdas de tabla sí. Asombroso.
aabbccsmith
25

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

Si eres aún más afortunado y tus usuarios usan navegadores de primer nivel (por ejemplo, si se trata de una aplicación de intranet en las computadoras que controlas, como lo es mi último proyecto), ¡puedes usar el nuevo diseño de caja flexible en CSS3!

Chris
fuente
22

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 hoja de estilo / CSS:

padding-bottom: 100%;
Tonye - True Vine Productions
fuente
14
¿100% de qué? 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 configura su html y su cuerpo a una altura del 100% también, entonces el div puede ir al 100%. Con solo un div, el 100% será relativo al contenido div. No lo intenté con un div anidado.
Jess
1
Significa el 100% de la altura del elemento (agregado como el relleno del elemento), lo que hace que duplique la altura. No hay garantía de que llene la página, y definitivamente no es la respuesta a la pregunta. Como ya se ha notado, en realidad puede llenar más que la ventana gráfica.
Martin
2
relleno inferior: 100% establece la altura + 100% del ancho del
Romeno
1
from w3school: especifica un relleno inferior en porcentaje del ancho del elemento. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa
21

Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero me parece un poco hinchada con un contenedor innecesario 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>

CSS

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 */
}

La solución anterior usa unidades de ventana gráfica y flexbox , y por lo tanto es IE10 +, siempre que use la sintaxis anterior 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 al codepen

Michael P. Bazos
fuente
principal {altura: 10px; flexión: 1; desbordamiento: auto}
Naeem Baghi
2
Después de perder horas y probar varios enfoques, ¡este fue el mejor! Es conciso, simple e inteligente.
marciowb
19

Ahora hay un montón de respuestas, pero descubrí que usar 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 utilicé Bootstrap para hacer un tablero en el que tenía una barra lateral y una principal. Quería que el principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.

div {
    height: 100vh;
}

Admite IE9 y versiones posteriores: haga clic para ver el enlace

puiu
fuente
14
Pero 100vh suena como toda la altura, no la altura restante. ¿Qué pasa si tienes un encabezado y quieres llenar el resto?
Epirocks
14
<!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 sanos, puede poner el div "encabezado" antes del contenido, como un hermano, y el mismo CSS funcionará. Sin embargo, IE7- no interpreta la altura correctamente si el flotante es 100% en ese caso, por lo que el encabezado debe estar EN el contenido, como se indicó anteriormente. El desbordamiento: auto causará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la vista visible, pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.

Jerph
fuente
¡Cerca! Casi lo que quiero, excepto que voy a tener otras cosas posicionadas en el div... es decir top: 0;, pondré algo justo debajo del encabezado. ¡Modificaré mi pregunta nuevamente, porque la respondiste perfectamente y todavía no es lo que quiero! Solo ocultaré el desbordamiento ya que el contenido debe encajar.
Vincent McNabb
-1: Esta respuesta crea un div llamado contenido que cubre toda la pantalla, no el resto de la pantalla
Casebash
11

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 hacerlo con la altura del padre menos la altura del encabezado, decidí hacer que el contenido se divida en 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 del encabezado. De esta forma, el contenido se muestra perfectamente 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%;
}
B_G
fuente
15
¿Qué pasa si no sabes la altura del encabezado?
Yugal Jindle
11

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

Desafortunadamente, MSIE 9 o versiones anteriores no son compatibles y debe usar el prefijo del proveedor para la propiedad CSS para todos los navegadores que no sean Firefox. Esperemos que otros proveedores también eliminen el prefijo pronto.

Otra opción sería CSS Grid Layout, pero eso tiene aún menos soporte de las versiones estables de los navegadores. En la práctica, solo MSIE 10 lo admite.

Actualización año 2020 : Todos los navegadores modernos son compatibles con ambos display: flexy display: grid. Lo único que falta es soporte para el subgridcual solo es compatible con Firefox. Tenga en cuenta que MSIE tampoco es compatible con la especificación, pero si está dispuesto a agregar hacks CSS específicos de MSIE, puede hacerlo funcionar. Sugeriría simplemente ignorar a MSIE porque incluso Microsoft dice que ya no debería usarse.

Mikko Rantalainen
fuente
10

Solución de cuadrícula CSS

Simplemente definiendo la propiedad bodywith display:gridy the grid-template-rowsusing autoy the frvalue.

* {
  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 cuadrículas @ CSS-Tricks.com

Paulie_D
fuente
9

¿Por qué no solo 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%;
}

¿Le da una altura html y cuerpo (en ese orden) y luego solo le da una altura a sus elementos?

Funciona para mi

Thaoms
fuente
La cuestión es que si un usuario usa una pantalla grande para revisar esta página y la altura de su encabezado se fija exactamente 100 píxeles, que es menor que el 40% de la altura actual, habrá un gran espacio en blanco entre el encabezado y el contexto del cuerpo.
Saorikido
8

En realidad, puede usar display: tablepara 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 positionset to relative, absoluteor fixed. Funcionará siempre que el elemento padre tenga una altura distinta de cero.

Vea este violín y también el código a continuación:

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>
Greg
fuente
2
Una buena respuesta, que voté positivamente, pero desafortunadamente, no funciona con IE8, que seguirá existiendo durante mucho tiempo.
Vincent McNabb
Las aplicaciones como Gmail usan Javascript para el tamaño, que de todos modos es una mejor solución que CSS en la mayoría de los casos.
Vincent McNabb
Creo que están usando Javascript porque no hay otra buena solución CSS entre navegadores, no porque sea mejor.
Greg
1
@VincentMcNabb funciona en IE8 w3schools.com/cssref/pr_class_display.asp . ¡Solo requiere! Declaración DOCTYPE. Nunca supe de un valor de tabla para el atributo de visualización. Solución genial +1
Govind Rai
8
 style="height:100vh"

Resuelto el problema para mí. En mi caso, apliqué esto al div requerido

Zohab Ali
fuente
6

Vincent, te responderé nuevamente usando tus nuevos requisitos. Como no le importa que el contenido esté oculto si es demasiado largo, no necesita flotar el encabezado. Simplemente coloque el desbordamiento oculto en las etiquetas html y body, y configure la #contentaltura al 100%. El contenido siempre será más largo que la ventana gráfica por la altura del encabezado, pero estará oculto y no provocará 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>
Jerph
fuente
Ya pensé en esto. Pero tampoco funciona. Solo me quedaré con un tableporque funciona. Aún así gracias por la actualización.
Vincent McNabb
5

Prueba esto

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

Encontré una solución bastante simple, porque para mí era solo un problema 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 de contenido establecida en p. Ej. 20em o 50% una página casi vacía no dejará toda la página roja.

htho
fuente
4

Tuve el mismo problema pero no pude hacer que el trabajo fuera 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

Utilicé flexboxes pero de una manera más simple, utilizando solo las propiedades display: flex y flex-direction: row | column :

Yo uso angular y quiero que el tamaño de mis componentes sea el 100% de su elemento padre.

La clave es establecer el tamaño (en porcentajes) de todos los padres para limitar su tamaño. En el siguiente ejemplo, la altura de myapp 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>
Anthony Brenelière
fuente
4

Para la aplicación móvil, solo uso 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;
}

Demostración: https://jsfiddle.net/u763ck92/

grinmax
fuente
3
Esta no es la solución correcta. vh es inconsistente en los navegadores móviles. Vea aquí para más detalles: stackoverflow.com/questions/37112218/…
HarshMarshmallow
3

Derivando 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 () para el bloque de contenido.

El calc () comienza con 100% y resta las alturas de los encabezados y pies de página (debe incluir valores de relleno)

El uso de "altura mínima" en lugar de "altura" es particularmente útil para que pueda funcionar con contenido renderizado de 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 esté visible.

Aquí hay un ejemplo simple de un encabezado y 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 pueden simplificarse, pero se entiende la idea ...

Pat M
fuente
3

En Bootstrap:

Estilos CSS:

html, body {
    height: 100%;
}

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

<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 al centro 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í

gadolf
fuente
1

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

<!DOCTYPE html>
<html>
<head>
<style>
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;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
Michael Schade
fuente