IE6の固定ページレイアウト

ヘッダー、フッター、およびサイドバーの位置は固定されています。中央には両方のスクロールバーがあるコンテンツ領域があります。ブラウザ上に外部スクロールバーはありません。私はIE7とFFで動作するレイアウトを持っています。私はIE6のサポートを追加する必要があります。どうすればこの作品を作れますか？IE6の固定ページレイアウト

ここに私の現在のCSSの概算があります。

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

<head> 
    <title>Layout</title> 
    <style> 
    * { 
     margin: 0px; 
     padding: 0px; 
     border: 0px; 
    } 

    .sample-border { 
     border: 1px solid black; 
    } 

    #header { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     right: 0px; 
     height: 60px; 
    } 

    #left-sidebar { 
     position: absolute; 
     top: 65px; 
     left: 0px; 
     width: 220px; 
     bottom: 110px; 
    } 

    #right-sidebar { 
     position: absolute; 
     top: 65px; 
     right: 0px; 
     width: 200px; 
     bottom: 110px; 
    } 

    #footer { 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     height: 105px; 
    } 

    @media screen { 
     #content { 
     position: absolute; 
     top: 65px; 
     left: 225px; 
     bottom: 110px; 
     right: 205px; 
     overflow: auto; 
     } 
     body #left-sidebar, 
     body #right-sidebar, 
     body #header, 
     body #footer, 
     body #content { 
     position: fixed; 
     } 
    } 
    </style> 
</head> 

<body> 
    <div id="header" class="sample-border"></div> 
    <div id="left-sidebar" class="sample-border"></div> 
    <div id="right-sidebar" class="sample-border"></div> 
    <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div> 
    <div id="footer" class="sample-border"></div> 
</body> 

</html>

出典

2008-08-27 Mocky

あなたのプロジェクトには残念ですが、Dean Edwards' IE7 javascript adds support for fixed positioning to IE6です。

出典

2008-08-27 14:56:46 ceejayoz

Try IE7.js何も変更することなく問題を修正する必要があります。

リンク：IE7.js

出典

2008-08-27 15:17:25 Cade

が<head>

<!--[if lte IE 6]> 
<style type="text/css"> 
html, body { 
    height: 100%; 
    overflow: auto; 
} 
.ie6fixed { 
    position: absolute; 
} 
</style> 
<![endif]-->

に次のコードを追加します。あなたはposition: fixed;

出典

2008-08-27 19:12:40 palotasb

これらの回答は参考になりましたし、彼らは私を聞かせていたことを好きにie6fixed CSSクラスを追加します。限られた固定位置をIE6に追加しますが、私のサイドバーのトップとボトムの両方のCSSプロパティを指定すると、IE6のレイアウトを壊すバグを修正するものはありません（i私が必要とする行動）。

トップとボトムを指定できないため、トップと高さを使用しました。 heightプロパティは非常に必要であることが判明しました。私は、ページが読み込まれ、任意のサイズの高さを再計算するためにjavascriptを使用しました。

以下は、動作させるためにテストケースに追加したコードです。これはjQueryでもっときれいになるかもしれません。

<!--[if lt IE 7]> 
<style> 
body>div.ie6-autoheight { 
    height: 455px; 
} 
body>div.ie6-autowidth { 
    right: ; 
    width: 530px; 
} 
</style> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<script type="text/javascript"> 

function fixLayout() { 
    if (document.documentElement.offsetWidth) { 
     var w = document.documentElement.offsetWidth - 450; 
     var h = document.documentElement.offsetHeight - 175; 
     var l = document.getElementById('left-sidebar'); 
     var r = document.getElementById('right-sidebar'); 
     var c = document.getElementById('content'); 

     c.style.width = w; 
     c.style.height = h; 
     l.style.height = h; 
     r.style.height = h; 
    } 
} 
window.onresize = fixLayout; 
fixLayout(); 
</script> 
<![endif]-->

出典

2008-08-29 15:02:13 Mocky