HTML と CSS がいくつかあり、どちらも IE8 以降で動作します。ただし、IE7 では、これは機能しません。ラッパーを中央に配置するのではなく、左側に配置します。このCSSは質問の最小量ですが、私が持っているいくつかの要件は次のとおりです。
- 絶対配置ラッパー
- 柔軟な幅 (ここでは 90% に設定されており、最大幅と最小幅も同様です)
- 上部 39 ピクセル (バナーを考慮して)
仮説として、私は IE7 のハックを次の範囲で行うことができました。
*left: 50%;
*margin-left: -45%;
しかし、私はしたくない...とにかく、ここにマークアップがあります:
<!DOCTYPE html>
<html lang='en'>
<head>
<style type="text/css">
#banner-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 39px;
width: 100%;
min-width: 752px;
background-color: rgb(95,95,95);
z-index: 1;
}
#wrapper-main {
position: absolute;
top: 39px;
left: 0;
right: 0;
bottom: 0;
width: 90%;
max-width: 1200px;
min-width: 750px;
min-height: 620px;
background-color: lightblue;
margin: 0 auto;
overflow: hidden;
z-index: 0;
}
#wrapper-left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 180px;
background-color: green;
}
#wrapper-content-container {
position: relative;
padding-left: 181px;
height: 100%;
top: 0;
right: 0;
left: 0;
overflow-y: scroll;
z-index: 0;
}
#wrapper-content {
position: relative;
min-height: 900px;
width: 100%;
z-index: 0;
}
</style>
</head>
<body>
<div id="banner-wrapper"></div>
<div id="wrapper-main">
<div id="wrapper-left">THIS STAYS HERE</div>
<div id="wrapper-content-container">
<div id="wrapper-content">
<!-- Scrollable content goes here -->
THIS SCROLLS
</div>
</div>
</div>
</body>
</html>
これを機能させる方法はありますか?相対的に配置されたラッパーは、フル フォームの場合のデザインに重大な影響を与えます。固定幅も同様です。私にはアイデアがありませんが、他の誰かが実行可能な解決策を知っているかもしれません。
注:全体的なデザインの一部を明確にするために、さらに HTML/CSS を追加しました。
助けてくれてありがとう。