CSS 最大高度属性答案

【问题标题】：CSS Max Height PropertyCSS 最大高度属性
【发布时间】：2008-11-18 02:28:13
【问题描述】：

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

【问题讨论】：

你能不能只将高度设置为你的最大高度并设置overflow: scroll;？
@Jason 这可以使用静态高度，例如200 像素。但是，如果您的身高是一个百分比，例如100%，然后溢出的内容将覆盖指定的高度，只是拉伸元素而不是剪裁它或引入滚动条。

【解决方案1】：

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

【讨论】：

这有问题...它会在 IE6 上生成有关活动内容的警告。
我从未使用过 Visual Studio，但 css expression() 是 Internet Explorer 独有的，所以我希望他们的开发工具能够识别它。
overflow:auto 和overflow-x:hidden FTW！！ :) 感谢您的修复
我尝试在我用 jQuery 构建的 Dashboard UI 上执行此操作，但在 IE 中遇到了严重的延迟...当心性能问题。
或者我们可以停止支持 IE 6

【解决方案2】：

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

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

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

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

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

【讨论】：

这仅适用于min-width/height，不 max-width/height的IE6（唯一需要破解的浏览器）。
更正（来自规范）：“百分比是根据生成框的包含块的高度计算的。” 因此，父级必须设置高度为了使用最小/最大高度（或宽度）。

【解决方案3】：

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

【讨论】：

还有人尝试这个成功吗？

【解决方案4】：

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

【讨论】：

好主意，但它仍然需要将基本高度设置为大于他想要的块级元素的高度。否则，他只会在他真正关心的元素上设置那个高度。

【解决方案5】：

主要黑客（红狼风格）：

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

【讨论】：

【解决方案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>

【讨论】：