Pregunta Haga un div llenar el alto del espacio de pantalla restante


Actualmente estoy trabajando en una aplicación web, donde quiero que el contenido llene el alto de toda la pantalla.

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

Tengo un encabezado div y un contenido div. Por el 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>

Toda la altura de la página está llena y no se requiere desplazamiento.

Para cualquier cosa dentro del contenido div, configuración top: 0; lo pondrá justo debajo del encabezado. A veces, el contenido será una tabla real, con su altura establecida en 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 tendrá alturas establecidas en porcentajes también. Entonces algo al 100% dentro del div lo llenará hasta el final 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% dentro #content ocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una mesa es lo único que funciona.


1332
2017-09-18 05:06


origen


Respuestas:


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 del diseño de cajas 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 ir precedida de -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 en 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 y IE11 + admiten Flexbox. Para IE 10 o anterior, puede usar la cuña FlexieJS.

Para verificar 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 de tamaño de contenido o dimensiones de espacio restante. En mi ejemplo, configuré el encabezado para ajustar 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 establecí 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 propiedad shorthands el flex-grow, Flex-Shrinky flex-basis propiedades para establecer la flexibilidad de los elementos flexibles. Mozilla tiene un buena introducción al modelo de cajas flexibles.


663
2017-07-27 08:14



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

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

Una vez que puede 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 podría ser más grande que la ventana gráfica, tendrá que configurar overflow-y para desplazarse.


207
2017-09-18 08:16



La publicación original es hace más de 3 años. Supongo que muchas personas que vienen a este post como yo buscan una solución de diseño similar a la aplicación, digamos un encabezado fijo, un pie de página y un contenido de altura completa, ocupando 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>


153
2017-10-21 15:02



En lugar de usar tablas en el marcado, podría 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 bien: IE8 +, todos los navegadores modernos y dispositivos móviles (Puedo usar)


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 } 

134
2018-06-06 11:20



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

Cuando desee que el elemento intermedio se extienda por toda la página verticalmente, puede usar 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 ...

Manifestación

Marcado supuesto

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

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

Entonces, lo que hago es sumar la altura de los elementos y deducir de 100% utilizando calc() función.

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


76
2018-04-27 12:05



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>


37
2018-05-22 03:20



Podría hacerse simplemente por CSS utilizando 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 revisé, funciona en todos los principales navegadores: Chrome, IEy FireFox


24
2017-09-14 21:09



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:

HTML:

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

CSS:

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

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

Vista previa en vivo de JSFiddle


22
2018-02-20 17:12