Divide the page in two (vertically) among two children, if one not available, other should cover complete page

Question

I hope the pictures describes what I want. Currently both the child div have height:50% However, when one of them is absent, I want the other to cover the entire page.

I am looking for a css only solution as I presume I'm missing something very fundamental! :P

Answer 1

Without using the flex model or JavaScript, good luck :)

If you're okay with only modern browsers, then use the flex layout. Make a container with flex-direction: column and give each div inside a flex value of flex: 1 1 auto;.

See this fiddle.