CSS最大高度属性

Question

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

- Ryan Smith

---

你能不能将高度设置为最大高度，并设置 overflow: scroll; 呢？ - Jason

@Jason，如果使用静态高度（例如200px），那么这个方法是可行的。但是，如果您的高度是百分比（例如100%），则溢出的内容将覆盖指定的高度，而不是剪切它或引入滚动条，从而只会拉伸元素。 - Derek Dahmer

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

Overflow:auto在大多数情况下都可以处理额外的溢出问题。

- ethyreal

---

我从未使用过Visual Studio，但是CSS expression()函数是Internet Explorer独有的，所以我希望他们的开发工具能够识别它。 - ethyreal

overflow:auto 和overflow-x:hidden FTW!! :) 感谢修复。 - Tom Roggero

我在使用jQuery构建的仪表板UI上尝试了这个，但在IE浏览器中遇到了严重的延迟问题...请注意性能问题。 - pixelbobby

请确保您只为您所拥有的IE版本使用它。 IE 6在性能方面不是最好的渲染引擎，因此在许多地方可能会出现问题。 - ethyreal

我们可以选择停止支持IE 6。 - ethyreal

Answer 2

我从一个2005年的帖子中找到了这个解决方案（Min-Height Fast hack）。虽然它是一个hack，但它很简单，而且只涉及CSS：

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

这个示例是针对最大高度（max-height）的，但它同样适用于最小高度（min-height）、最小宽度（min-width）和最大宽度（max-width）。 :)

*注意：您必须使用绝对值，百分比无法生效。

现在，您所需要的就是添加“overflow:scroll;”就可以实现滚动条了。

- Mottie

---

这仅适用于IE6（现在对于此仅需要进行hack的浏览器仅有IE6）的min-width/height，而不是max-width/height。 - mercator

更正（来自规范）：“百分比是相对于生成的盒子所在块的高度计算的”。因此，父元素必须设置高度才能使用min/max-height（或宽度）。 - Kevin Peno

Answer 3

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

- KrisK

---

有其他人尝试过这个并且成功了吗？ - chainwork

Answer 4

你可以使用一个高度设置为你所需高度并且带有overflow:scrolling属性的包装div。然后内部div没有设置高度，当它增长时，它将填充并使用第一个div的滚动条。

- RedWolves

---

好的想法，但仍需要将基础高度设置为块级元素所需的高度以上。否则，他只会在他真正关心的元素上设置该高度。 - Joel Coehoorn

Answer 5

重大黑客攻击（RedWolves风格）：

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

我在使用max-height属性时遇到了问题，所以我已经使用了这两个类并成功解决了问题。但是这样做很丑陋，于是我在寻找更好的方法时发现了这个问题。divMax具有position:absolute，可以让下面的内容显示出来，但控制divInner的最终高度为200px。

- gordon

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>

- Zhou