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

オーバーフロー：autoは、ほとんどの場合、余分な流出がある場合に機能します。

于 2008-11-18T03:48:09.300 に答える
16

2005 年に作成された投稿 ( Min-Height Fast hack ) からこのソリューションを見つけました。これはハックですが、シンプルで純粋な CSS です。

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

例は max-height ですが、min-height、min-width、max-width でも機能します。:)

*注意: 絶対値を使用する必要があります。パーセンテージは機能しません。

今必要なのは「overflow:scroll;」だけです。これをスクロールバーで機能させるには

于 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

主要なハック (RedWolves スタイル):

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

私は max-height 属性から愛を得ていなかったので、すでにこれを持っていて、これらの 2 つのクラスで成功しました。しかし、それは醜いので、より良い検索でこの質問にヒットします。divMax をposition: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 に答える