バックグラウンド
私はしばらくの間、960pxの幅と2つの列を持つレイアウトを探していました：
- メインコンテンツ：右揃え、幅550ピクセル、コンテナの右マージンから挿入。
- サイドバー：左揃え、幅250ピクセル、上、左、下の端がコンテナと同じ高さ。
私が苦労しているのは、サイドバーの背景が250pxの幅、親の100％の高さを占め、親の左端と同じ高さになるように背景を設定して、メインコンテンツを残して残りの幅と100％の高さを占めるようにすることです。親。
私はいくつかのテクニックを見てきましたが、それらは比較的柔軟性がないように見えました。たとえば、それはエレガントですが、FauxColumnsは適切ではないようですhttp://www.alistapart.com/articles/fauxcolumns/。
少し考えて、コンテンツのレンダリングと背景のレンダリングを分けてみることにしました。具体的には、メインコンテンツを右にフロートさせ、サイドバーを左にフロートさせclear:bothてから、コンテナーが2つの列の大きい方に調整されるようにします。
次に、まだコンテナ内にありますが、の後にclear:both、絶対に配置された2つの空のdivがあります。サイドバーの高さは100％、幅は250pxでleft:0、メインコンテンツの幅は100％です。また、サイドバーが前面になるようにz-indexを調整しました。
他にも必要なCSSがあります（たとえば、コンテナーラッパーは比較的配置されている必要があります）が、以下のソースでそれを参照してください。
質問
これは、Safariを搭載したMacで期待していたとおりに機能し、両方の背景が最も高い列に従って拡張され、ソースのマークアップが有効です。ただし、私の2つの主な懸念事項は次のとおりです。
- これが他のブラウザ、特にIEでどのようにレンダリングされるかわかりません
- 私はSEOを念頭に置いて設計しようとしましたが、私はまだ学んでいるのでSEOについてあまり手がかりがありません、これはSEOにどれほど優しいですか？
その他の情報源
フロートdivを親の100％の高さにするにはどうすればよいですか？
http://brentgrossman.com/348/not-so-fuax-columns/
（他にもあるかもしれませんが、申し訳ありませんが思い出せません！）
ソースコード
何が起こっているのかをよりよく説明するために、明るい色と調整されたdivを使用していることに注意してください。
<!DOCTYPE html>
<html lang="en-US" >
<head>
<title>Test Page</title>
<meta charset="UTF-8"/>
<style>
#main {
}
#main-outer-wrapper {
width: 960px;
margin: 0 auto;
}
#main-inner-wrapper {
background: red;
/* This is the fallback background colour */
position: relative;
/* Must be relative for the background divs to have 100% height and to ensure z-index functions */
z-index: -20;
/* Ensure fallback background is below all other divs */
}
#main-content {
/* This is where all the actual content will be */
width: 550px;
float: right;
/* IMPORTANT float */
background: orange;
/* Background would actually be transparent, here it is for illustration */
margin: 10px 80px 10px 10px;
/* Keep content away from edges as part of design only*/
}
#left-primary-sidebar {
/* This is for the actual sidebar content */
float: left;
/* IMPORANT float */
background: green;
/* Again, background colour is purely for illustration */
width: 230px;
margin: 10px;
/* I have adjusted the margin for illustration only, in situ width is 250px and margin is 0 */
}
#main-content-background {
/* This div has no content */
background: blue;
/* The intended right column background */
/* Position MUST be absolute so that the div can
* have its height based on parent container, using
* top and bottom. Width can be specific but I have
* set it to 100% for maintainability */
position: absolute;
width: 100%;
right: 0;
top:0;
bottom: 0;
z-index:-10;
/* As width is 100%, it is important that this is placed below the sidebar */
}
#left-primary-sidebar-background {
/* As above regarding position */
background: purple;
position: absolute;
width: 250px;
left: 0;
top:0;
bottom: 0;
z-index:-9;
/* Div must be above right column */
}
.clear {
clear: both;
}
</style>
</head>
<body>
<section id="main">
<div id="main-outer-wrapper" class="wrapper outer-wrapper">
<div id="main-inner-wrapper" class="wrapper inner-wrapper">
<section id="main-content">
<div id="main-content-wrapper" class="wrapper">
Content
</div><!-- #main-content-wrapper -->
</section><!-- #main-content -->
<section id="left-primary-sidebar">
<div id="left-primary-sidebar-wrapper" class="sidebar">
Sidebar
</div><!-- #left-primary-sidebar-wrapper -->
</section><!-- #left-primary-sidebar --> <div id="main-content-background"></div>
<div id="left-primary-sidebar-background"></div>
<div class="clear"></div>
</div><!-- #main-inner-wrapper -->
</div><!-- #main-outer-wrapper -->
</section><!-- #main -->
</body>
</html>
読んでくれてありがとう、コメントを楽しみにしています！