blocks|key|3355462|text|遗憾的是，IE6没有，所以你必须为IE6使用一个表达式，然后为所有其他浏览器设置最大高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3355463|+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;
}|code-block|syntax|javascript|3355464|溢出:自动最可能在大多数情况下工作，因为有任何额外的溢出。|3355465|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:

<pre><code> div{
 _height: expression( this.scrollHeight &gt; 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
 max-height: 333px; /* sets max-height value for all standards-compliant browsers */
 overflow:scroll;
}
</code></pre>

Overflow:auto would most likely work in most cases for have any extra spill over.

blocks|key|356782|text|我在2005年的一篇文章(Min-Height+Fast+hack)中找到了这个解决方案。这是一种技巧，但它是简单而纯粹的CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|356783|selector+{
++max-height:500px;
++height:auto+!important;
++height:500px;
}|code-block|syntax|javascript|356784|该示例适用于max-height，但它适用于min-height、min-width和max-width。:)|356785|*注意:必须使用绝对值，百分比不起作用。|356786|现在你只需要"overflow:+scroll+;“就可以使用滚动条了。|356787|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dustindiaz.com/min-height-fast-hack/^0|D|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

I found this solution from a post made in 2005 (<a href="http://www.dustindiaz.com/min-height-fast-hack/" rel="noreferrer">Min-Height Fast hack</a>). It's a hack but it's simple and pure CSS:

<pre><code>selector {
 max-height:500px;
 height:auto !important;
 height:500px;
}
</code></pre>

The example is for max-height, but it works for min-height, min-width and max-width. :)

*Note: You must use absolute values, percentages don't work.

All you need now is the "overflow:scroll;" to make this work with scroll bars

blocks|key|3355495|text|selector
{
++++max-height:900px;
++++_height:expression(this.scrollHeight>899?"900px":"auto");
++++overflow:auto;
++++overflow-x:hidden;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3355496|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|356733|text|你可以有一个包装器div与高度设置为您的高度和溢出:滚动。那么内部div没有设置高度，当它增长时，它将填充，然后使用第一个div的滚动条？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356734|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?

blocks|key|3355544|text|重大黑客攻击(RedWolves风格)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3355545|.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px+solid+navy;background-color:white;}|code-block|syntax|javascript|3355546|我没有从max-height属性中得到任何好处，所以我已经有了这个属性，并成功地使用了这两个类。但它是丑陋的，所以在寻找更好的方法时，可以提出这个问题。拥有position:absolute的divMax可以让下面的内容显示出来，但可以将divInner的最终高度控制在200px。|offset|length|style|CODE|3355547|entityMap^0|0|0|26|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Major hack (RedWolves-style):

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

I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having <code>position:absolute</code> lets content underneath show through but controls the ultimate height of divInner to 200px.

blocks|key|355397|text|我从http://www.tutorialspoint.com/css/css_scrollbars.htm上找到了这个，并做了一些修改。它似乎同时适用于IE9和FF19|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|355398|<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>
Example+of+scroll+value:

<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. 
++++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. 
++++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. 
++++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. ++++++++
+++++</div>

<br+/>
Example+of+auto+value:

<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. 
+++</div>|code-block|syntax|javascript|355399|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tutorialspoint.com/css/css_scrollbars.htm^0|2|1G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I found this from <a href="http://www.tutorialspoint.com/css/css_scrollbars.htm" rel="nofollow">http://www.tutorialspoint.com/css/css_scrollbars.htm</a> and modified a bit. It seems working for both IE9 and FF19

<pre><code>&lt;style type="text/css"&gt;
.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;
}
&lt;/style&gt;
&lt;p&gt;Example of scroll value:&lt;/p&gt;

&lt;div class="scroll"&gt;
 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.&lt;br/&gt;
 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.&lt;br/&gt;
 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.&lt;br/&gt;
 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.&lt;br/&gt; 
 &lt;/div&gt;

&lt;br /&gt;
&lt;p&gt;Example of auto value:&lt;/p&gt;

&lt;div class="auto"&gt;
 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.&lt;br/&gt;
 &lt;/div&gt;
</code></pre>

Is there a good cross-browser way to set a <code>max-height</code> property of a DIV and when that DIV goes beyond the <code>max-height</code>, it turns into an overflow with scrollbars?

CSS Max Height Property

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

问CSS最大高度属性
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS最大高度属性EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS最大高度属性
EN