2008-11-18 50 views
46

¿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

+2

¿no podría simplemente establecer la altura para que sea su altura máxima y establecer el 'overflow: scroll;'? – Jason

+1

@ 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. –

Respuesta

1

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.

+0

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. –

35

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.

+0

Hay un problema con esto ... genera una advertencia en IE6 sobre el contenido activo. – mcherm

+0

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

+0

desbordamiento: automático y desbordamiento-x: FTW oculto !! :) gracias por la corrección –

16

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

+9

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

+0

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. –

7
selector 
{ 
    max-height:900px; 
    _height:expression(this.scrollHeight>899?"900px":"auto"); 
    overflow:auto; 
    overflow-x:hidden; 
} 
+0

¿Alguien más prueba esto con éxito? – chainwork

-1

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> 
0

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.

Cuestiones relacionadas