web-dev-qa-db-ja.com

CSS最大高さプロパティ

良いクロスブラウザを設定する方法はありますかmax-height DIVのプロパティと、そのDIVがmax-height、スクロールバーでオーバーフローになりますか？

overflowcss
47
Ryan Smith

残念ながら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は、ほとんどの場合、余分なスピルオーバーが発生する可能性が最も高いでしょう。

35
ethyreal

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;」です。これをスクロールバーで動作させるには

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

高さとオーバーフローとして高さを設定したラッパーdivがありますか：スクロール。次に、内側のdivには高さが設定されておらず、成長するにつれて最初のdivのスクロールバーが使用されますか？

1
RedWolves

大規模なハック（RedWolvesスタイル）：

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

私はmax-height属性から何の愛も得ていなかったので、すでにこれを持っていて、これらの2つのクラスで成功しました。しかし、それはquestionいので、この質問をより適切に検索しようとしています。 position:absoluteを持つdivMaxは、下のコンテンツを表示しますが、divInnerの最終的な高さを200pxに制御します。

0
gordon