¿Existe una buena manera de navegador cruzado para establecer una propiedad de altura máxima de un DIV y cuando ese DIV va más allá de la altura máxima, se convierte en un desbordamiento con barras de desplazamiento?CSS Altura máxima Propiedad
Respuesta
Podría tener un envoltorio div con la altura establecida como su altura y desbordamiento: desplazamiento. Entonces, el div interno no tiene ninguna altura establecida y a medida que crece se llenará y luego usará las barras de desplazamiento del primer div.
Buena idea, pero todavía requiere establecer una altura de base a más de lo que quiere para un elemento de nivel de bloque. De lo contrario, simplemente establecería esa altura en el elemento que realmente le preocupa. –
Lamentablemente IE6 no por lo que tienen que utilizar una expresión para IE6, a continuación, establecer el máximo de la altura de todos los otros navegadores:
div{
_height: expression(this.scrollHeight > 332 ? "333px" : "auto"); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
overflow: auto lo más probable es el trabajo en la mayoría de los casos para tener cualquier Derrame adicional.
Hay un problema con esto ... genera una advertencia en IE6 sobre el contenido activo. – mcherm
nunca he usado visual studio, pero la expresión css() es exclusiva de Internet Explorer, así que espero que sus herramientas de desarrollo lo reconozcan. – ethyreal
desbordamiento: automático y desbordamiento-x: FTW oculto !! :) gracias por la corrección –
Encontré esta solución de una publicación realizada en 2005 (Min-Height Fast hack). Es un truco, pero es simple y puro CSS:
selector {
max-height:500px;
height:auto !important;
height:500px;
}
El ejemplo es para un máximo de altura, pero funciona para min-height, min-width y max-ancho. :)
* Nota: Debe usar valores absolutos, los porcentajes no funcionan.
Todo lo que necesita ahora es el "desbordamiento: desplazamiento;"; para hacer este trabajo con barras de desplazamiento
Esto solo funciona en IE6 (el único navegador que necesita un hack para nada más) para 'min-width/height', * not *' max-width/height'. – mercator
Corrección (de la especificación): _ "El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada." _ Como tal, el padre debe tener una altura establecida para min/max-height (o ancho) para ser utilizado. –
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
¿Alguien más prueba esto con éxito? – chainwork
encontré esto desde http://www.tutorialspoint.com/css/css_scrollbars.htm y modificar un poco. Parece que trabaja tanto para IE9 y FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
Mayor Hack (RedWolves de estilo):
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
que estaba recibiendo ningún amor de la máxima altura de atributos, así que tuve esta alreadyand tuvo éxito con estos 2 clases Pero es feo, por lo tanto, en la búsqueda de un mejor golpe esta pregunta. divMax tiene position:absolute
permite mostrar el contenido por debajo, pero controla la altura máxima de divInner a 200px.
- 1. En jQuery, ¿cómo puedo animar la propiedad de CSS de "altura máxima"?
- 2. Envoltura de texto con altura máxima fija
- 3. La propiedad de flotación de CSS no muestra altura?
- 4. ExtJS ventana abierta con altura máxima
- 5. Altura máxima de div en Internet Explorer
- 6. Invalidar propiedad de altura
- 7. CSS 100% altura + encabezado con altura estática;
- 8. Problema con DIV de desplazamiento de altura máxima en IE9
- 9. CSS 100% Altura Div
- 10. Imagen receptiva altura máxima 100% no funciona en firefox
- 11. Elementos de altura igual con CSS
- 12. Longitud máxima de la propiedad FormsAuthenticationTicket.UserData
- 13. Uso de la altura máxima en el elemento DIV
- 14. Porcentaje Altura HTML 5/CSS
- 15. CSS anidado div altura 100%
- 16. JavaScript: Encuentre la altura de línea de DIV, no la propiedad CSS pero la altura de línea real
- 17. ¿Cómo establecer la altura máxima de un diseño en android?
- 18. Cómo establecer la altura máxima de $ img pero tenga proporciones
- 19. propiedad CSS zoom
- 20. Obtener altura de div sin altura establecida en css
- 21. CSS 100% de altura del contenedor con altura mínima
- 22. 'propiedad: 0' o 'propiedad: 0px' en CSS?
- 23. jqGrid con altura automática; pero tiene una altura máxima y barras de desplazamiento
- 24. ¿Qué significa exactamente el valor "automático" para la propiedad de altura de CSS?
- 25. CSS: Fix altura de la fila
- 26. CSS: altura: completa el resto de div?
- 27. css - altura mínima por número de líneas
- 28. CSS: Flotante divs tienen 0 altura
- 29. CSS 100% de altura en ie
- 30. CSS Altura de Línea - inferior solamente
¿no podría simplemente establecer la altura para que sea su altura máxima y establecer el 'overflow: scroll;'? – Jason
@ Jason que funciona utilizando una altura estática, p. 200px. Sin embargo, si su altura es un porcentaje, p. 100%, el contenido desbordado anulará la altura especificada y solo estirará el elemento en lugar de recortarlo o introducir barras de desplazamiento. –