Ayuda de diseño CSS: estirar div hasta la parte inferior de la página

Estoy tratando de crear un diseño con un área de 'encabezado' que contiene un logotipo y algunos enlaces, y luego un área de contenido que debe extenderse hasta la parte inferior de la página. Aquí es donde me estoy atorando.

He rodeado el encabezado y el contenido con un contenedor div que tiene una altura del 100%, esto funciona bien. Pero no puedo hacer que la división de contenido se extienda hasta la parte inferior de la división del contenedor, ya que darle una altura mínima del 100% parece tomar la altura del cuerpo de la página, así que termino con una barra de desplazamiento debido al espacio ocupada en la parte superior de la página por el encabezado.

Aquí hay una estructura metálica que, con suerte, hace que lo que estoy tratando de lograr sea un poco más claro ...

Aquí hay un ejemplo rápido de CSS, esto funciona, aparte de que siempre hay una barra de desplazamiento en la que parece ser la altura del área del encabezado ...

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
}
body {
    background-color: #000;
}
#container {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    min-height: 100%;
}
#header {
    padding-top: 26px;
}
#logo {
    width: 194px;
    height: 55px;
    margin: 0 auto;
    background-color: #fff;
}
#content {
    margin-top: 10px;
    position: absolute;
    width: 1000px;
    min-height: 100%;
    background-color: #fff;
}

Respuestas a la pregunta(3)

Su respuesta a la pregunta