[SOLUCIONADO] Height 100% después de min-height.

Rafael · #1 (**permalink**) 15/07/2013, 18:36

Pongo un código de pruebas:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {margin: 0; padding: 0;}
 
html, body {height: 100%;}
 
#Wrap1 {
    min-height: 100%;
    background-color: orange;}
 
#Wrap2 {
    height: 90%;
    background-color: red;}
</style>
</head>
 
<body>
<div id="Wrap1">
<div id="Wrap2">
 
<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 -->
</body>
</html>

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?

pzin · #2 (**permalink**) 16/07/2013, 02:14

Es un bug de WebKit, que curiosamente ocurre en Firefox también.

Se soluciona con una posición absoluta del hijo:

Código CSS:

Ver original#Wrap2 {
  position: absolute;
}

Claro que igual luego necesitas poner una posición relativa al contenedor.

Rafael · #3 (**permalink**) 16/07/2013, 10:04

Ok, funcionó bien en este ejemplo sencillo, pero ya al meterlo en mi layout más elaborado no me funcionó, tendría que compensar con algún calc por aquí y por allá, pero lo tendré en mente.

Es bueno saber que el buggy no era yo.

Gracias.

ryugen · #4 (**permalink**) 16/07/2013, 20:57

Otra forma de solucionarlo sería darle al #Wrap1 un height:1px , eso hace la magia también!
Podés verlo funcionando acá: http://jsfiddle.net/97Mqe/

Este pase de magia se los tiene que agradecer a: http://www.456bereastreet.com/archiv...and_no_height/

Por cierto el blog del cuál está sacado está muy bueno, es altamente recomendable.

Además que su autor es una persona muy interesante para seguir en twitter https://twitter.com/rogerjohansson mas allá que no sea un usuario muy activo.

Saludos

pzin · #5 (**permalink**) 17/07/2013, 00:41

Más que otra forma es la forma ideal de solucionarlo.

Rafael · #6 (**permalink**) 17/07/2013, 01:46

Muchas gracias Ryugen, a darle.