max-height
Establece el alto máximo para un elemento.
Sintaxis
{ max-height: sMaxHeight }
Valores posibles
sMaxHeight
Variante que especifica o recibe el alto máximo para un elemento:
longitud |
Número de punto flotante seguido de un designador de unidades absolutas (cm, mm, in, pt o pc) o de un designador de unidades relativas (em, ex o px). Para obtener más información acerca de las unidades de longitud admitidas, vea Referencia de unidades de longitud. |
porcentaje |
Entero seguido de un signo de porcentaje (%) que especifica el porcentaje del alto del bloque donde está incluido el elemento que se va a usar como alto máximo del elemento. Si el alto del bloque donde está incluido el elemento no se establece de forma explícita, el elemento no tiene ningún alto máximo y la propiedad max-height se interpreta como 0%. Para obtener más información sobre los bloques que incluyen elementos y cómo se calcula su alto, vea la especificación Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (Hojas de estilos en cascada (CSS), nivel 2, revisión 1 (CSS2.1)). |
La propiedad no tiene un valor predeterminado. La propiedad de la hoja de estilos en cascada no se hereda.
Observaciones
Los atributos min-height y max-height se aplican a los elementos a nivel de bloque flotantes y con posicionamiento absoluto, a los elementos inline-block y a algunos controles intrínsecos. No se aplican a elementos en línea no reemplazados, como columnas de tabla y grupos de filas o columnas. (Un elemento "reemplazado" tiene dimensiones intrínsecas, como un elemento IMG o un elemento TEXTAREA.)
Esta propiedad solo está habilitada bajo !DOCTYPE estricto.
Ejemplo
En el siguiente ejemplo se muestra cómo afectan los atributos min-height y max-height al diseño de un elemento DIV:
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN">
<html>
<head><style>
.height {
float:left;
width:300px;
background:#fff;
margin:0 1em;
}
#example1 {min-height:200px;}
#example2 {max-height:100px;}
.content {
border :1px solid #c00;
padding:5px;
}
</style>
</head>
<body>
<div class="height" id="example1">
<div class="content">
<h2>{min-height:200px }</h2>
<p>The height of this div is always at least 200px.<br/><br/>
The content does not fill the entire div.</p>
</div>
</div>
<div class="height" id="example2">
<div class="content">
<h2>{max-height:100px}</h2>
<p>This div will not grow more than 100px in height.<br/><br/>
The content that does not fit in the div continues beyond it.</p>
</div>
</div>
</body>
</html>
Información sobre estándares
Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).
Aplicable a
A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HN, HR, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, INS, LI, OBJECT, OL, OPTION, P, Q, RT, RUBY, S, SELECT, SPAN, SUB, TABLE, TD, TH, TR, TT, U, UL, VAR, XMP