css tamaño - Haz un div lleno de la altura del espacio de pantalla restante





ancho ajustar (25)


 style="height:100vh"

resuelto el problema para mi En mi caso apliqué esto al div requerido.

Actualmente 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 cuenta. Esto podría ser una altura arbitraria. Quiero que la división de contenido llene el resto de la página al 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>

La altura completa de la página se rellena y no se requiere desplazamiento.

Para cualquier cosa dentro del contenido div, configuración top: 0; Lo pondré justo debajo de la cabecera. A veces, el contenido será una tabla real, con su altura establecida en 100%. Poner header dentro del content no permitirá que esto funcione.

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

Actualizar:

Los elementos dentro de la div contenido también tendrán alturas establecidas en porcentajes. Así que algo al 100% dentro de la div lo llenará hasta el fondo. Al igual que 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 de #content ocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una tabla es lo único que funciona.




Puede 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 la position establecida en relative , absolute o 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>



Descargo de responsabilidad: la respuesta aceptada da la idea de la solución, pero me parece un poco abultada con un envoltorio 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 utiliza unidades de vista y http://caniuse.com/#feat=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 un contenido desbordado: enlace a codepen




Se podría hacer puramente mediante CSS usando 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 comprobé, funciona en todos los principales navegadores: Chrome , IE y FireFox




Realmente no hay una forma de navegador de sonido para hacer esto en CSS. Suponiendo que su diseño tiene complejidades, necesita 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 puede obtener este valor y establecer la altura del elemento, debe adjuntar los controladores de eventos tanto a la ventana onload como a onresize para poder 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, deberá configurar el desbordamiento para desplazarse.







Hay un montón de respuestas ahora, pero encontré usando la altura: 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 panel 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;
}

Compatible con IE9 y superior: haga clic para ver el enlace




Vincent, contestaré de nuevo usando tus nuevos requerimientos. Como no le importa que el contenido se oculte si es demasiado largo, no necesita flotar el encabezado. Simplemente coloque el desbordamiento oculto en las etiquetas html y body, y establezca #content height en 100%. El contenido siempre será más largo que la vista por la altura del encabezado, pero estará oculto y no causará 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>



que nunca trabajó para mí en otra forma, entonces con el uso del JavaScript como NICCAI sugerido en la primera respuesta. Estoy utilizando ese enfoque para volver a escalar el <div>con Google Maps.

Aquí está el ejemplo completo de cómo hacerlo (funciona en Safari / FireFox / IE / iPhone / Andorid (funciona con rotación)):

CSS

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

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>



Lo que funcionó para mí (con un div dentro de otro div y asumo 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%;



Tuve el mismo problema pero no pude hacer funcionar la solución con flexboxes arriba. 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 sencilla, utilizando solo las propiedades de visualización: flex y flex-direction: row | column :

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



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 blanca debajo del pie rojo. Así que puse el color de fondo de las páginas en rojo. Y los contenidos en color de fondo a blanco. Con la altura del contenido establecida en, por ejemplo 20em o 50% una página casi vacía no dejará en rojo toda la página.




CSS3 Simple Way

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

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




<!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 colocar el div "header" antes del contenido, como hermano, y el mismo CSS funcionará. Sin embargo, IE7 no interpreta la altura correctamente si el flotador es del 100% en ese caso, por lo que el encabezado debe estar EN el 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.




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

Ya 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 sea de altura completa, pero colocarlo absolutamente en la esquina superior izquierda y luego definir un relleno para la parte superior que tiene la altura de la cabecera. De esta manera, el contenido se muestra claramente 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%;
}



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

Si tiene 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 lo es mi último proyecto), ¡puede usar el nuevo Flexible Box Layout en CSS3!




Si puede lidiar con no admitir navegadores antiguos (es decir, MSIE 9 o más antiguos), puede hacerlo con el http://caniuse.com/#feat=flexbox que ya es W3C CR. Ese módulo también permite otros buenos trucos, como reordenar contenido.

Desafortunadamente, MSIE 9 o menor no admite esto y debe usar el prefijo de proveedor para la propiedad CSS para cada navegador que no sea Firefox. Esperemos que otros proveedores también eliminen el prefijo pronto.

Otra opción sería el diseño de cuadrícula de CSS, pero eso tiene aún menos soporte de las versiones estables de los navegadores. En la práctica, solo MSIE 10 soporta esto.




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 lo 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 flexbox )

Todos los principales navegadores y IE11 + soportan Flexbox. Para IE 10 o más, puede usar la cuña FlexieJS.

Para comprobar la compatibilidad 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, he configurado 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 configurar 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, la propiedad flex muestra las propiedades flex-grow , flex-shrink y flex-basis para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una flexbox .







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

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

Suponiendo que tenemos un header altura fija y elementos de footer y queremos que la etiqueta de section tome toda la altura vertical disponible ...

Demo

Marcado asumido

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

Así que 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;
}

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

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




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

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

Funciona para mi




Solución CSS Grid

Solo definiendo el body con display:grid y las grid-template-rows usando auto y la propiedad de valor fr .

* {
  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 para Grids @ CSS-Tricks.com




Ninguna de las soluciones publicadas funciona cuando necesita el div inferior para desplazarse 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: relleno de la altura restante de un contenedor mientras se maneja el desbordamiento en CSS

Vista previa en vivo de JSFiddle




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




No estoy del todo seguro de haber entendido la pregunta porque esta es una respuesta bastante sencilla, pero aquí va ... :)

¿Has intentado configurar la propiedad de desbordamiento del contenedor como visible o automática?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Agregar eso debería empujar el contenedor negro al tamaño que requiera su contenedor dinámico. Prefiero que sea visible a automático porque el auto parece venir con barras de desplazamiento ...





css html html-table