¿Cómo llenar el 100% de la altura restante?

78 
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

El contenido de (1) como se muestra arriba es desconocido, ya que puede aumentar o disminuir en páginas generadas dinámicamente. El segundo div (2) como se muestra arriba, debería llenar el espacio restante.

aquí hay un ejemplo de mi html

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css ...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

¿O es incorrecto este método? ¿Cómo debería hacer esto? por favor mira mi demo y muéstrame mi error.

html css height fill Bhojendra Rauniyar
fuente
¿Quieres que la altura de 1 + 2 sea la altura exacta de la ventana gráfica? ¿O 2 es del mismo tamaño que la ventana gráfica y se desplaza hacia abajo igual a la altura de 1?
thgaskell
altura de 1 no lo sé, y restante de 1 luego 2 será la altura completa.
Bhojendra Rauniyar
@ C-Link ¿Qué quieres decir con height:100%? ¿Quiere decir que el div debería ocupar la altura restante?
Mr_Green
@Mr_Green ¡sí! altura restante.
Bhojendra Rauniyar
@ C-Link altura restante de la página o la altura restante de desplazamiento dentro de la página?
Mr_Green

Respuestas:

62

Debería poder hacer esto si agrega un div (a #headercontinuación) para envolver su contenido de 1.

  1. Si flota #header, el contenido de #someidse verá obligado a fluir a su alrededor.

  2. A continuación, establece #headerel ancho de 'en 100%. Esto hará que se expanda para llenar el ancho de la div que contiene, #full. Esto empujará efectivamente todo #someidel contenido a continuación, #headerya que ya no hay espacio para fluir por los lados.

  3. Finalmente, establezca #someidla altura al 100%, esto hará que tenga la misma altura que #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

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

Actualizar

Creo que vale la pena mencionar que flexbox es compatible con los navegadores modernos de hoy. El CSS podría modificarse y #fullconvertirse en un contenedor flexible y #someiddebería establecer su flex grow a un valor mayor que 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}
Thgaskell
fuente
por favor vea mi ** demo y corríjala donde haya un error.
Bhojendra Rauniyar
Creo que tienes razón, pero mi problema no se pudo resolver, pero de todos modos esto me ayudó a entender esto. Entonces acepto tu respuesta.
Bhojendra Rauniyar
Su respuesta funciona muy bien, pero estoy un poco confundido en cuanto a por qué funciona: si juega con los colores de fondo, puede ver que #someidSIEMPRE es igual a la altura de #full, a pesar de la altura de #header. Lógicamente, el contenido de #someiddebería comenzar en la parte superior de #full. ¿Por qué #headerempuja el contenido hacia abajo?
Hunter S
3
El problema con esto es que tiene #someidla misma altura que #full, por lo que se #someiddesborda #fullpor la altura de #header. No se establece #someiden el 100% del espacio restante . Si se establece overflow: scroll;en la #someidque se vería el problema.
Old Pro
3
Sí, esta respuesta debería actualizarse. Fue un truco que abusó del hecho de que el flotador empujaba el contenido hacia abajo, lo cual era "suficientemente bueno" en ese momento cuando se trataba de navegadores que no admitían cosas como calcy los flexboxdiseños no eran ampliamente compatibles. ¡Mira lo lejos que hemos llegado en menos de 3 años!
thgaskell
11

Para obtener una divaltura del 100% en una página, también deberá establecer cada objeto en la jerarquía por encima del div al 100%. por ejemplo:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

Aunque no puedo entender completamente su pregunta, supongo que esto es lo que quiere decir.

Este es el ejemplo con el que estoy trabajando:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style es solo un reemplazo para el CSS que no he externalizado.

Serdalis
fuente
¿Qué elemento quieres que tenga una altura del 100%? y en relacion a que?
Serdalis
(2) debe tener un 100% de altura. Su método puede funcionar sin envoltorio, pero estoy usando un envoltorio.
Bhojendra Rauniyar
si también quiere someidser 100%, debe agregarle 100% y configurar el contenedor al 100% también. Edité mi pregunta para mostrar esto.
Serdalis
Ya dije que puede que no funcione porque uso un contenedor y luego configurarlo al 100% tampoco funciona.
Bhojendra Rauniyar
Pruebe el ejemplo que publiqué, es posible que le falte algo en la jerarquía que lo está arruinando.
Serdalis
5

Esto se puede hacer con tablas:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Luego aplique CSS para hacer que someid llene el espacio restante:

#someid {
    height: 100%;
}

Ahora, puedo escuchar los gritos enojados de la multitud: "¡Oh, no, está usando mesas! ¡Dále de comer a los leones!" Por favor, escúchame.

A diferencia de la respuesta aceptada que no logra nada más que hacer que el contenedor div tenga la altura completa de la página, esta solución hace que div # 2 llene el espacio restante como se solicita en la pregunta. Si necesita ese segundo div para llenar la altura total asignada, esta es actualmente la única forma de hacerlo.

¡Pero siéntete libre de demostrar que estoy equivocado, por supuesto! CSS siempre es mejor.

Jonathan Graef
fuente
4 

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }
    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>
Expandir fragmento

Ernesto Hegi
fuente
¿Podría desarrollar un poco esta respuesta de solo código? ¡Gracias!
arkascha
Hola @arkascha, acabo de actualizar mi publicación con un ejemplo de código de trabajo. Gracias por la sugerencia. Salud.
Ernesto Hegi
1

Sé que esta es una entrada tardía, pero incluso en 2016 estoy sorprendido por la falta total de soporte de IE para flex (actualmente 11 es el único que lo admite y tiene muchos errores en ese http://caniuse.com/#feat= caja flexible ) que desde una perspectiva empresarial no es genial. Entonces, creo que hasta que IE se cierre, la mejor solución y la más compatible con todos los navegadores seguramente debe ser una JS / Jquery.

La mayoría de los sitios ya usan Jquery y un ejemplo muy simple (para mi código) es:

$('#auto_height_item').height($(window).height() - $('#header').height());

Obviamente, puede reemplazar la ventana y el encabezado y dejar que las matemáticas básicas hagan el trabajo. Personalmente todavía no estoy convencido de flex todavía ...

Ukuser32
fuente
0

Agregué esto para las páginas que eran demasiado cortas.

html:

<section id="secondary-foot"></section>

css:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}
usuario4533280
fuente
Intenté esto en JSFiddle de @ BhojendraNepal, pero no pude hacerlo funcionar. ¿Podría mostrar en su propio JSFiddle o describir dónde agregó su elemento?
Dag Høidahl
0

Cree un div, que contenga ambos divs (full y someid) y establezca la altura de ese div a lo siguiente:

altura: 100vh;

La altura de los divs que los contienen (full y someid) debe establecerse en "auto". Eso es todo.

DECIR AH
fuente
0

Sé que esta es una pregunta antigua, pero hoy en día hay una forma súper fácil de hacer eso, que es CCS Grid, así que déjame poner los divs como ejemplo:

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

luego el código CSS:

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

Y eso es todo, la segunda fila, scilicet, el someide, tomará el resto de la altura debido a la propiedad 1fr, y el primer div tendrá un mínimo de 100px y un máximo de lo que requiera.

Debo decir que CSS ha avanzado mucho para facilitar la vida de los programadores.

Juan joya
fuente