CSS最大高度属性

是否有一个很好的跨浏览器的方式来设置一个DIV的最大高度属性,当该DIV超出最大高度,它会变成滚动条溢出?

可悲的是,IE6并没有这样,所以你必须使用IE6的expression式,然后设置所有其他浏览器的最大高度:

  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; } 

溢出:汽车很可能在大多数情况下工作有任何额外的溢出。

我从2005年的一篇文章( Min-Height Fast hack )中find了这个解决scheme。 这是一个黑客,但它是简单而纯粹的CSS:

 selector { max-height:500px; height:auto !important; height:500px; } 

这个例子是为最大高度,但它适用于最小高度,最小宽度和最大宽度。 🙂

*注意:您必须使用绝对值,百分比不起作用。

你现在需要的只是“溢出:滚动” 使这个工作与滚动条

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

你可以有一个高度设置为高度和溢出的包装div:滚动。 那么内部div没有高度设置,随着它的增长,它将填充然后使用第一个div的滚动条?

主要黑客(RedWolves风格):

 .divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;} .divInner{border:1px solid navy;background-color:white;} 

我没有得到最大高度属性的爱,所以我已经拥有了这两个class,并已经成功。 但是在寻找更好的命中这个问题上是丑陋的。 divMax有position:absolute让下面的内容显示,但是控制divInner的最终高度为200px。

我从http://www.tutorialspoint.com/css/css_scrollbars.htmfind了这个,并修改了一下。; 它似乎适用于IE9和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>