La propiedad max-height en CSS se usa para establecer la altura máxima de un elemento. Si el contenido del elemento es más grande que la altura máxima especificada, el contenido se desbordará; de lo contrario, no tendrá ningún efecto. Si el contenido del elemento es más pequeño, entonces no tiene efecto. El valor de la propiedad de altura puede ser anulado por la propiedad max-height.
Sintaxis:
max-height: none|length|initial|inherit;
Valores de propiedad:
- none: es el valor predeterminado y no contiene max-height. Es también sin especificación de altura máxima.
Sintaxis:
max-height: none;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>max-height property</title>
<style>
p {
max-height:none;
border:1px solid black;
overflow:auto;
}
</style>
</head>
<body>
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</body>
</html>
Producción:
- longitud: esta propiedad se utiliza para definir la altura máxima en longitud. La longitud se puede configurar usando px, em, etc.
Sintaxis:
max-height: length;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>max-height property</title>
<style>
p {
max-height:35px;
border:1px solid black;
overflow:auto;
}
</style>
</head>
<body>
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</body>
</html>
Producción:
- initial: esta propiedad se utiliza para establecer el valor de max_height en su valor predeterminado.
Sintaxis:
max-height: initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>max-height property</title>
<style>
p {
max-height:initial;
border:1px solid black;
overflow:auto;
}
</style>
</head>
<body>
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</body>
</html>
Producción:
- heredar: esta propiedad se hereda de su padre.
Navegadores compatibles: los navegadores compatibles con la propiedad max-height se enumeran a continuación:
- Google Chrome 18.0
- Borde 12.0
- Internet Explorer 7.0
- Firefox 1.0
- Ópera 7.0
- Safari 1.3
Publicación traducida automáticamente
Artículo escrito por EnaMotwani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA