[Css] Haga un div llenar el alto del espacio de pantalla restante



Answers

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.

Question

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 div de contenido, configurando top: 0; lo pondrá justo debajo del encabezado. 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 forma de lograr el mismo efecto sin usar la table ?

Actualizar:

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




CSS3 Manera simple

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

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




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

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 } 






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>




Solución de red CSS

Simplemente definiendo el body con display:grid y grid-template-rows usando auto y la propiedad fr value.

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




Prueba esto

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



Ahora hay un montón de respuestas, pero encontré el uso de la altura: 100vh; para trabajar en el elemento div que necesita llenar todo el espacio vertical disponible.

De esta forma, no necesito jugar con la pantalla o el posicionamiento. Esto fue útil cuando usé Bootstrap para hacer un tablero donde 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




 style="height:100vh"

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




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




Estuve luchando con esto por un tiempo y terminé con lo siguiente:

Como es fácil hacer que el contenido DIV sea de la misma altura que el elemento principal pero aparentemente difícil de convertirlo en la altura principal menos la altura del encabezado, decidí hacer que el contenido div fuera de altura completa, pero lo coloqué absolutamente en la esquina superior izquierda y luego definí un relleno para la parte superior que tiene la altura del encabezado. De esta forma, 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%;
}



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

padding-bottom: 100%;



it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the very first answer. I am using that approach to rescale the <div> with the Google Maps.

Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):

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>



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

¿Te da html y cuerpo (en ese orden) una altura y luego solo das altura a tus elementos?

Funciona para mi




<!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, puede colocar 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 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 vista visible, pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.




Links