web-dev-qa-db-ja.com

<div>位置：絶対;下：0; IE7で期待どおりに機能しない

大学向けのコースカタログツールである私のサイトには、動的に更新されるクラスのリストを含む中央ペインがあります。 Firefox、Opera、およびChromeでは、中央のペインに意図したスクロール動作があります。クラスリストが高さを超えると、中央のペインにスクロールバーが表示されます。ただし、IEは、高さが明示的に設定されている場合にのみこのバーを表示します。 JavaScriptを使用してサイズ変更時に中央ペインの高さをリセットせずに、Internet Explorerにスクロールバーを表示させるにはどうすればよいですか？

中央のペイン：

<div id="middlenav">
    <div id="middleheader"></div>
    <div id="courselist"></div>
</div>

およびそのCSS：

div#middlenav {
    position: absolute;
    left: 250px;
    right: 350px;
    top: 0px;
    bottom: 0px;
}

div#courselist {
    overflow: auto;
    position: absolute;
    top: 55px;
    bottom: 0px;
    width: 100%;
}

中央のペインがbottom: 0px;ステートメントに準拠しておらず、含まれている#courselistの高さ全体に拡大しているようです。 body { height: 100% }を試しましたが、それでも修正されませんでした。

htmlcssinternet-explorer-7scroll
14
Scott R

「topプロパティはbottomプロパティを上書きします...」 https://developer.mozilla.org/en-US/docs/CSS/bottom

topを0pxではなくautoに変更します。

div#middlenav
{
    position: absolute;
    left: 250px;
    right: 350px;
    top: auto;
    bottom: 0px;
}

これで下部の位置が修正されます。 #middlenavが絶対的に配置されている場合は、親要素がposition:absolute;またはposition:relative;を持っている方を基準にすることに注意してください。 #middlenavに配置される親要素がない場合、それは<body>に相対的です。

なぜあなたが#courselistを絶対的に配置しているのかわかりません。 #middlenavの内部にあるので、静的のままにするか、比較的配置することができると思います。ただし、何をするかに関係なく、#courselistまたは#middlenavに高さを設定する必要があると思います。高さのデフォルト値はautoであるため、要素はコンテンツに合わせて展開されるため、スクロールバーはありません。

この質問は3年前に行われたことは知っていますが、CSSの配置に問題がある可能性のある他の人のために投稿しています。乾杯！

8
namklabs

CSSで絶対配置を使用する場合、反対側のエッジを設定することは完全に許容されますが、Internet Explorerの制限により、このアプローチはそこで機能しない可能性があります。

Internet Explorer6のバグを回避する方法はありません。InternetExplorer7以降では、標準モードをトリガーすると問題が解決します。

要素の下部まで伸びる偽の列は、通常、 偽の列 を使用して実現されます。

3
Quentin

Doctypeが HTML strict に設定されていることを確認してください。そうしないと、IEは風変わりな動作をし、他の配置やオーバーフローと混同されます。

これをページの上部に追加します。

<!DOCTYPE html>
1
BalusC

位置：絶対;下：0px;要素を要素の下部に設定します。ただし、要素の下部がどこにあるかを知る必要があります。高さを100％に設定するか、別の要素の下部に配置する場合：0px;次に、それらの要素の1つが内側にあり（の高さ全体を占める）、固定サイズの要素でない限り、底がどこにあるかはわかりません。体の高さを100％にすることはできません。それは、永遠に続くようなものだからです。本体または含まれる要素の高さを指定してみてください。 ：D

1
Gordon Gustafson

完全に理解できるかどうかはわかりませんが、中央のペインが特定の高さを超えたときにスクロールするようにしたいと思います。これが私のやり方です。

#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
              overflow:scroll; overflow-x:hidden; width:500px; }

これにより、すべてのブラウザのコースリストが最小の高さ400に設定されます。これを通過すると、スクロールバーが表示されます。 min-heightはIE7以下ではサポートされていないため、IE hack _height 400を使用して、最小の高さとして機能します。overflow-x：hiddenは、万が一の場合に備えて、水平スクロールを非表示にします。垂直にしたい。これがお役に立てば幸いです。

0
briank