47

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

4

6 回答 6

35

遗憾的是 IE6 没有，因此您必须为 IE6 使用表达式，然后为所有其他浏览器设置最大高度：

 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 在大多数情况下很可能会工作，因为有任何额外的溢出。

于 2008-11-18T03:48:09.300 回答
16

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

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

该示例适用于最大高度，但适用于最小高度、最小宽度和最大宽度。:)

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

您现在需要的只是“溢出：滚动；” 使用滚动条进行这项工作

于 2009-07-28T23:40:25.973 回答
8 
selector
{
    max-height:900px;
    _height:expression(this.scrollHeight>899?"900px":"auto");
    overflow:auto;
    overflow-x:hidden;
}
于 2011-07-01T02:01:06.337 回答
1

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

于 2008-11-18T02:31:21.280 回答
0

主要黑客（红狼风格）：

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

我没有从 max-height 属性中得到任何爱，所以我已经有了这个并且成功地完成了这两个类。但这很丑，所以在寻找更好的问题时。divMaxposition:absolute让下面的内容显示出来，但将 divInner 的最终高度控制为 200px。

于 2013-03-01T22:14:09.813 回答
-1

我从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>
于 2013-02-28T18:35:07.713 回答