0

フォーラムの左側に配置され、ブラウザウィンドウの高さの100％を埋めるdivを作成しようとしています。また、スクロールしても固定位置に留まります。

私がこれまでに持っているコードは、ChromeとFFで問題なく動作します。ただし、IEでは、ページを下にスクロールし続けると、ページが大きくなっているようにスクロールバーが展開されます。

#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}

原因はわかっています--_top ：expression（eval（document.body.scrollTop））; --しかし、これは、IEでdivを固定位置に保つものでもあります。

さらに、overflow：hiddenは効果がありません。

私が話していることについてのアイデアが必要な場合は、InternetExplorerでこのページを開いてください。

どんな助けでもいただければ幸いです。ありがとう！

4

2 に答える 2

1

IEの場合でも、その式は必要ありません。

以下は私にとってはうまくいきます...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

    <style type="text/css">
        #sidebar {
           background-color: #a75143;
           width: 240px;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
        }
    </style>

</head>

<body>
    <div id="sidebar"></div>
</body>
</html>
于 2012-09-13T20:02:29.267 に答える
0

いくつかの条件付きCSSと無効な宣言を使用して、フォーラムでこれを解決することができました。ただし、上記のJeremyのソリューションは、ProBoardsの外部で最適に機能します。

html, body { height: 100%; }
#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
#sidebar-container { min-height: 100%; overflow: hidden; }
</style>
<![endif]-->

<div id="sidebar-container">
   <div id="sidebar">
      some content
   </div>
</div>
于 2012-09-13T21:19:38.113 に答える