min-height / min-width no respeta el tamaño de las cajas en algunos navegadores
Ver este ejemplo:http: //jsfiddle.net/vrgT3/5
Hice una250x250px
parent div conoverflow: auto;
para que las barras de desplazamiento aparezcan cuando el contenido desborde el cuadro. He establecido un fondo azul para que quede claro cuando el padre está visible.
Dentro del padre es un niño div con fondo rojo para mayor visibilidad. Tiene8px
bordes negros ybox-sizing: border-box;
para que el relleno y los bordes se incluyan en el cálculo del tamaño de la caja. El div hijo se establece enmin-height: 100%
ymin-width: 100%
.
Resultado Esperado Child div debe ser exactamente del mismo tamaño que el padre, por lo que no se muestra azul ni aparecen barras de desplazamiento. El tamaño del cuadro calculado (contenido + relleno + bordes) debe ser250x250px
. Debería haber8px
bordes negros incrustando esto, dejando un234x234px
región roja.
Funciona con
Midori 4.1 UbuntuChromium 16 UbuntuOpera 11.61 UbuntuProblemas con:
IE 8 WinXP: aparecen barras de desplazamiento horizontales y verticales. El contenido es249x266px
con8px
bordes que dan un tamaño de caja calculado de265x282px
.
Firefox 3.6 WinXP: aparece la barra de desplazamiento vertical. El contenido es217x250px
y el tamaño de la caja calculada es233x266px
.
Firefox 10 Ubuntu: aparece la barra de desplazamiento vertical, el contenido es221x250px
, el tamaño de la caja calculada es237x266px
.
He comprobado caniuse.com y parece que al menos los navegadores en cuestión admiten la @ requerimin-height
, min-width
ybox-sizing
. ¿Lo que da
Solución Como sugirió Marat, este es un error del navegador. He resuelto una solución alternativa utilizando JavaScript para agregar relleno / márgenes para corregir las diferencias en offsetWidth / Height. Véalo aquí:http: //jsfiddle.net/vrgT3/8