Pongo un código de pruebas:
Código HTML:
Ver original<!DOCTYPE html>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
#Wrap1 {
min-height: 100%;
background-color: orange;}
#Wrap2 {
height: 90%;
background-color: red;}
<h1>Esta es la columna principal
</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Curabitur suscipit sodales elit, ac blandit elit malesuada iaculis. Donec tristique, turpis eget mattis accumsan, mi neque aliquet dolor, sit amet pulvinar erat turpis eget magna. Nunc a lorem id ante mollis tincidunt. Proin ut ipsum lectus. Integer posuere arcu ut orci tincidunt condimentum. Ut nisi felis, gravida ac viverra eget, porttitor ac arcu.
</p>
</div><!-- Fin #Warp2 --> </div><!-- Fin #Wrap1 -->
No puedo sustituir de la línea 10 el min-height por height a secas, ya que es parte de un sticky footer.
Lo curioso es que si elimino el doctype si funciona el height 90%, aunque dejaría de ser html5.
¿Se les ocurre algo para que funcione?