DIVレイアウトとCSSの高さのヘルプ

Question

スクリーンショットをご覧ください。私は左divs（headerLeft）とright（headerRight）を使用してメインdivのいずれかの側に影を適用できるレイアウトを作成しようとしています。次に、ヘッダーの内容を保持するコンテンツdiv（ヘッダー）を持っています。これはすべてdiv（headerWrapper）にラップされています。私はこれを行うために4つのdivを使用しています。私はヘッダー、ナビゲーションバー、私が使用している別のバーで作業しています。これは、スクリーンショットの色分けされたdivで示されます。これは、CSSがピクセル単位で高さを使用しているためです。しかし、私は問題があります。これを私の主なコンテンツに適用したいが、それはうまくいかない。コンテンツは高さがページごとに変化しますが、これは問題ありませんが、シャドウを含むdivは表示されません。固定ピクセルの高さを指定しない限りです。助けてください。赤い部分は、影を含む左右の区画が表示される場所を示します。ここで

layoutProblem http://www.webquark.co.uk/layoutProblem.jpg

私は仕事のレイアウトを持っているCSSです：私は離れて、左右のdivの高さに100％を作る必要があると思う

#header{ 
margin:0 auto; 
height:160px; 
width: 76%; 
min-width:850px; 
font-size: 14pt; 
font-family: Calibri, Verdana, Ariel, sans-serif; 
color: #ffffff; 
background-image: url(headerBG.jpg); 
background-repeat: repeat-x; 
} 

#headerWrapper{ 
height:145px; 
width:100%; 
/**background-color: #202020;**/ 
} 

#headerLeft 
{ 
float: left; 
width: 12%; 
height:145px; 
background-image: url(shadowLeft.png); 
background-repeat: repeat-y; 
background-position: center right; 
/**background-color: #1e1e1e;**/ 
} 

#headerRight 
{ 
float: right; 
width: 12%; 
height:145px; 
background-image: url(shadowRight.png); 
background-repeat: repeat-y; 
background-position: center left; 
/**background-color: #1e1e1e;**/ 
} 

Basicly、私は設定を試してみました高さは100％ですが、それはうまく動作しません。私はまた、私の体の高さを100％に設定しました

乾杯、あなたが助けることを願っています。ワーキングトップバーとヘッダーのため

HTML：

<div id="topWrapper"> 
<div id="topRight"> 
</div> 
<div id="topLeft"> 
</div> 
<div id="top"> 
</div> 
</div> 


<div id="headerWrapper"> 
<div id="headerRight"> 
</div> 
<div id="headerLeft"> 
</div> 
<div id="header"> 
</div> 
</div> 

Answer 1

私は、1pxの高さの影に透明なPNGを使用します。それは、左に影を含み、空白部分はコンテンツ/ヘッダの幅、次に右手の影を含む。下の例では、これは1x932ピクセルになります。

コード例：ヘッダ/ボディ上の異なる背景色については

<style type="text/css"> 
    #headerBG { 
    background: gray url("repeating-background"); 
    } 
    #contentBG { 
    background: red url("repeating-background"); 
    } 
    .shadow { 
    width: 900px; /* width of inner content */ 
    margin: 0 auto; 
    padding: 0 16px; /* width of shadow bit */ 
    background: transparent url("new-shadow") repeat-y; 
    } 
</style> 

<div id="headerBG"> 
    <div class="shadow"> 
    header content 
    </div> 
    <div class="shadow"> 
    navigation 
    </div> 
</div> 

<div id="contentBG"> 
    <div class="shadow"> 
    body content 
    </div> 
</div> 

、あなたは（コンテンツの周囲に）影の内側に余分なdiv要素を追加する必要がある、またはどこ複数のシャドウイメージを作成しますどちらか真ん中の空白ビットには正しい背景色が含まれています。しかし、ヘッダーに別の画像を入力すると、おそらくボディーカラーだけで逃げることができます。ヘッダーはそれをカバーします。

Answer 2

取得divの高さを一致させるには、CSSで行うことは非常に困難です。それにはいくつかのトリックがありますが、ここでは簡単な解決策があると思います。

なぜ赤いパターンをボディの背景イメージにして、それをタイルにするのはなぜですか？あなたが何か他のものを表示したいならば、それを一番上に置いてください。私があなたのデザインを見ることができるから、それは私にとって最も簡単な解決策のように見えます。

高さに合わせてdivを取得したい場合は、absolute columns trickを使用することをおすすめします。 （私は実際にそれをテストしていませんが。）このCSSで

<div id="content"> 
    <div id="left-shadow"></div> 
    <div id="text"> 
     text goes here 
    </div> 
    <div id="right-shadow"></div> 
</div> 

を：：このような何かは、私が思うに、動作します

#content { 
    position: absolute; 
} 
    #left-shadow { 
     position: relative; 
     left: 0; top: 0; bottom: 0; 
     /* width needs to be specified */ 
    } 
    #text { 
     /* width needs to be specified */ 
    } 
    #right-shadow { 
     position: relative; 
     right: 0; top: 0; bottom: 0; 
     /* width needs to be specified */ 
    } 

し、左側の背景画像などのパターンを設定/右の影。