div.a {
background: yellow;
height: 300px;
}

div.b
{
background: gray;
height: calc(100% – 300px;
}

Górny DIV o klasie „a” ma wysokość 300px, dolny DIV o klasie „b” ma wysokość całej strony, pomniejszony o wysokość górnego DIVa – zatem dolny DIV wypełnia pozostałą część strony pod DIVem górnym.

body {
background: yellow; height: 100%;
}
html,
body,
#kontener ,
##content {
height: 100%;
min-height: 100%;
}

div#kontener {
width: 960px;
margin: 0 auto;
overflow: hidden;;
}

div#content {
width: 100%; background: red;
}

No i się zastanowić czy na pewno chcemy się pozbyć wsparcia dla starszych browserów (inna rzecz, że raczej user IE nie umrze, jak mu się div na całą stronę nie rozciągnie)

Wtedy kontener przyjmie 100% height.
Dla kontener damy jeszcze {position: relative;}, dla stopki {position: absolute; bottom: 0;}

PS. W razie dalszej potrzeby dyskusji zapraszam na nasze forum – tam możemy poszukać jakiegoś dobrego rozwiązania.

lub jeszcze bardziej zagnieżdżonej struktury?
Niestety nadanie height: 100% dla html i body nie wystarcza