posicionamiento - texto en una sola linea html

Extender div al final de la página(solo HTML y CSS)

Question

Es un problema muy simple, pero parece que no puedo encontrar una solución adecuada en línea. Quiero tener una lista de elementos en flujo natural con el último elemento extendido al final de la página. Así que si tengo

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

Necesito la bottom elemento para extenderse desde la parte inferior de la parte top a la parte inferior de la página. Cualquier solución que use solo html y css es bienvenida, y puede agregar divs de contenedores o cualquier cosa, siempre que pueda obtener un cambio de tamaño dinámico del div bottom

EDITAR: no quiero codificar ningún valor para la bottom , porque quiero que la bottom ajuste si se cambia el tamaño de la top

Aquí hay un violín para todas sus necesidades: http://jsfiddle.net/8QnLA/

Answer 1

Solución: # 1: tablas css:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (poco contenido)

Codepen # 2 (mucho contenido)

Solución # 2: Usar unidades de calc y viewport

#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

body {
  margin: 0;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

Where `min-height: calc(100vh - 50px);` means:

''Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.''

<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (poco contenido)

Codepen # 2 (mucho contenido)

Solución # 3 - Flexbox

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}

<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 - poco contenido

Codepen # 2 - mucho contenido

Answer 2

Establecer la altura de html, body a 100% . Luego, puede establecer la altura del último <div> en 100% y será tan alta como la ventana. Como probablemente no desee el desplazamiento, puede configurar el overflow: hidden en el html, body .

http://jsfiddle.net/GKbzx/