Question

是否有良好的跨浏览器方式来设置DIV的max-height属性，当DIV超出max-height时，它会变成带滚动条的溢出？

Answer 1

可悲的是，IE6没有，所以你必须使用IE6的表达式，然后为所有其他浏览器设置max-height：

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

溢出：在大多数情况下，auto很可能会因为任何额外的溢出而起作用。

Answer 2

我从2005年发布的帖子（Min-Height Fast hack）中找到了这个解决方案。这是一个黑客，但它是简单而纯粹的CSS：

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

示例适用于max-height，但适用于min-height，min-width和max-width。：）

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

现在你需要的只是“溢出：滚动;”使用滚动条

使这个工作

Answer 3

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

Answer 4

你有一个包装div，其高度设置为你的身高和溢出：滚动。然后内部div没有设置高度，随着它的增长，它将填充然后使用第一个div的滚动条？

Answer 5

主要黑客（RedWolves风格）：

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

我从max-height属性中得不到爱，所以我已经拥有了这个并且已经成功完成了这两个类。但它很丑，所以在寻找更好的打击这个问题。具有position:absolute的divMax允许显示下方的内容，但将divInner的最终高度控制为200px。

Answer 6

我从http://www.tutorialspoint.com/css/css_scrollbars.htm找到了这个并进行了修改。它似乎适用于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>

CSS最大高度属性

6 个答案: