Visualización CSS: la altura mínima de la tabla no funciona

104

¿Alguien sabe que puedo hacer que la altura mínima funcione con los últimos navegadores? Estoy usando tablas CSS y parece ignorar la altura mínima.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

Violín

css Samantha JT Star
fuente
1
publicación similar: stackoverflow.com/questions/25238/100-min-height-css-layout
diEcho
1
¿Puedes definir tablas CSS ? ¿Tienes algún marcado?
alex
1
publique su html, el CSS correspondiente y, si es posible, proporcione un enlace a su sitio (o intente crear un jsfiddle.net ) para mostrar su problema.
oezi
Esto sigue siendo un problema con FireFox, aunque el error se informa desde hace catorce años. bugzilla.mozilla.org/show_bug.cgi?id=307866
Frédéric

Respuestas:

204

Cuando se utilizan mesas, la altura es esencialmente la altura mínima, ya que las mesas siempre se estiran. Simplemente deshazte del "min-" y funcionará como esperas.

swider
fuente
13
Esto es completamente intuitivo, pero acertado. Los mejores resultados parecen venir al colocar la altura "fija" en los display: table-cellelementos más internos .
eternicode
4
No he probado en IE, pero parece que Firefox es el único que todavía se ve afectado por esto.
Dex
2
Confirmado que heightfunciona y min-heightno en Chrome 37, Safari 7 y FF 32 en mac. IE11 en Win 8.1 proporciona el comportamiento correcto en ambos. jsfiddle.net/nuwcyvwn/1
Stephan Muller
1
No es verdad. Si quiero que una tabla tenga AL MENOS 8 pulgadas de alto (uso css para el control de impresión) y carece de filas suficientes para llenarla, pero tengo un pie definido, puedo proporcionar una fila espaciadora (se permite estirar verticalmente), mientras defino altura en mis otras filas para asegurar que no lo hagan y lo que obtengo es un gran espacio que mantiene mi pie de página donde debería estar. Funciona muy bien en Chrome, pero no FF o el convertidor PDf que estoy usando; wkhtmltopdf. Sí, la altura funciona, pero no significa lo mismo semánticamente que altura mínima.
rainabba
7

Utilizar height: 1px;sobre la mesa o cualquier valor. Básicamente, necesitas darle a la mesa algo de altura para que funcione min-height. Tener solo min-heightno funcionará en tablas en Firefox.

virajs0ni
fuente
4
OP pregunta cómo hacer que funcione con los últimos navegadores. Solo le di una solución. ¿Cómo no es exacto?
virajs0ni
dar algo de altura como altura: 1px como dijiste, luego comenzó a funcionar
Mohamed Hussain
1

Siempre que esté utilizando display:table;o cualquier propiedad más profunda como, display:table-cell;considere usar en heightlugar de min-height. Como en las tablas altura = altura mínima considerando la función de autoexpansión en ellas.

Ahmad Awais
fuente
1

Solución para Firefox

Agregue altura para desbloquear la configuración de la altura mínima

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

El número de altura puede ser cualquier otro valor real menor o igual a la altura mínima para que funcione como se esperaba.

Mike Winchester
fuente