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

Question 1

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

Question 2

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

Si flota #header, el contenido de #someidse verá obligado a fluir a su alrededor.
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.
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;
}

Question 3

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.

Question 4

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.

Question 5

    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

Question 6

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

Question 7

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

Question 8

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.

Question 9

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.