altura: 100% VS min-height: 100%

utilizo este css para establecer un <div> a la altura máximaaltura: 100% VS min-height: 100%

¿Alguien puede dar una respuesta general, ¿cuál es la diferencia entre height: 100% y min-height: 100%?

2010-02-26 Dan

fyi min-height no es compatible con todos los navegadores – marcgg

Solo si marca IE <= 6 como navegador. Cualquier cosa más allá de eso solo lo admite. – BalusC

He aquí una explicación de la W3C (link):

El siguiente algoritmo describe cómo las dos propiedades [min-altura y max-height] influyen en el valor que se utiliza de la propiedad 'altura':

La altura utilizada provisional se calcula (sin 'min-height' y 'max-height') siguiendo las reglas en "Cálculo de alturas y márgenes" más arriba.

Si esta altura tentativa es mayor que 'max-height', las reglas anteriores se aplican nuevamente, pero esta vez usando el valor de 'max-height' como el valor calculado para 'height'.

Si la altura resultante es menor que 'min-height', las reglas anteriores se aplican nuevamente, pero esta vez utilizando el valor de 'min-height' como el valor calculado para 'height'.

Para resumir: Básicamente, si la altura mínima es mayor de lo que sería la altura (si se especifica una altura explícita o no), entonces se usa la altura mínima como la altura. Si la altura mínima es menor de lo que sería la altura, entonces la altura mínima no tiene ningún efecto.

Para el caso específico que proporcione, especificando height:100% hace que la altura del elemento sea igual a la altura del bloque contenedor. (Sin embargo esto podría ser anulada, por ejemplo, si también ha especificado max-height:50%.) Especificación de min-height:100% significa que si la altura calculada es inferior al 100%, de hecho, incluso si ha especificado explícitamente una altura inferior a 100%, se trata como si dijiste height:100%. Tenga en cuenta que una diferencia clave es que max-height puede anular altura, pero no puede anular min-height (porque max-height se considera después de altura pero antes min-altura de acuerdo con la recomendación del W3C como se cita anteriormente).

Fuente

2010-02-26 13:34:31

altura pondrá su elemento a un tamaño de 100% de su contenedor.

min-height pondrá el elemento a min 100% del tamaño del contenedor

pero ¿por qué quieres hacer eso de todos modos? Si min-altura es de 100% que no tiene ningún efecto en mi opinión ...

después de algunas investigaciones en IE7 se le puede dar una solución a un problema:

http://www.search-this.com/2007/02/05/css-min-height-explained/

Fuente

2010-02-26 13:22:06 Kennethvr

height: 100% irá al 100% de la altura del contenedor; min-height: 100% debe expandirse más allá de la altura del contenedor si es necesario.

Tenga en cuenta que la altura mínima no es compatible con IE.

Fuente

2010-02-26 13:23:32 Nalum

El único uso práctico que he visto de min-height es pegar un pie de página en la parte inferior de la página.Considere el siguiente código:

<html> 
    <head></head> 
    <body style="height: 100%"> 
    <div style="height: 100%"> 
     <div style="height: auto; min-height: 100%; background-color: blue;"> 
     <div class="main" style="padding-bottom: 300px;"> 
     </div> 
     </div> 
     <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div> 
    </div> 
    </body> 
</html>

El rojo está pegada a la parte inferior de la ventana de observación cuando el div principal está vacía, y a medida que llena el div principal con el contenido, el pie de página roja todavía se pega a la parte inferior de la página.

Para ilustrar el punto, si solo usa height: 100% en el div principal y lo llena de contenido, el pie de página rojo se colocará en la parte inferior de la ventana gráfica. La altura especificada como 100% no expande el div principal fuera de los límites de la ventana gráfica como lo hará si declara height: auto; altura mínima: 100%.

Fuente

2010-02-26 15:25:37

Disculpe señor, pero ¿puede explicar el significado de "altura: automático" en la clase "principal"? He visto esta expresión en varios ejemplos de diseños height100%. Algunos incluso codifican "height: auto! Important". Sin embargo, no entiendo cómo actúa esta regla – Dan

Respuesta

Cuestiones relacionadas