Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Height 100% después de min-height. en el foro de CSS en Foros del Web. Pongo un código de pruebas: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html lang = "es" > < head > < style > ...
  #1 (permalink)  
Antiguo 15/07/2013, 18:36
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Height 100% después de min-height.

Pongo un código de pruebas:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. * {margin: 0; padding: 0;}
  4.  
  5. html, body {height: 100%;}
  6.  
  7. #Wrap1 {
  8.     min-height: 100%;
  9.     background-color: orange;}
  10.  
  11. #Wrap2 {
  12.     height: 90%;
  13.     background-color: red;}
  14. </head>
  15.  
  16. <div id="Wrap1">
  17. <div id="Wrap2">
  18.  
  19. <h1>Esta es la columna principal</h1>
  20. <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>
  21.  
  22. </div><!-- Fin #Warp2 -->
  23. </div><!-- Fin #Wrap1 -->
  24. </body>
  25. </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?
  #2 (permalink)  
Antiguo 16/07/2013, 02:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Height 100% después de min-height.

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
  1. #Wrap2 {
  2.   position: absolute;
  3. }

Claro que igual luego necesitas poner una posición relativa al contenedor.
  #3 (permalink)  
Antiguo 16/07/2013, 10:04
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Height 100% después de min-height.

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.
  #4 (permalink)  
Antiguo 16/07/2013, 20:57
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Height 100% después de min-height.

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
  #5 (permalink)  
Antiguo 17/07/2013, 00:41
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Height 100% después de min-height.

Más que otra forma es la forma ideal de solucionarlo.
  #6 (permalink)  
Antiguo 17/07/2013, 01:46
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Height 100% después de min-height.

Muchas gracias Ryugen, a darle.

Etiquetas: color, height, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:23.