2012-05-05 8 views
1

私は明らかに多くの人々の頭痛の原因となるこのことをやろうとしています。私は、左側のサイドバーdivと右側のメインコンテンツdivを持っています。それらの下に、フッター。サイドバーで、divの上端から下端まで背景画像で塗りつぶしたストリップを実行したいので、メインコンテンツのdivの高さに合わせて、高さや高さに合わせてフッターの上に止めることができます。ページ全体ではなく、親に垂直にdivを伸ばしてください

私が何をしているのかを知りたい場合は、例題ページをhttp://lumn.net/about.htmlにします。リンクはアクティブではなく、コードは非常に乱雑です - 私は文字通り今週自分自身にCSSを教えています。しかし、少なくとも私が想定しているレイアウトを見ることができます。

<html>から「height:100%」の束を宣言しようとしましたが、問題のdivを通過しましたが、それはページ全体で伸びますが、親の高さには一致しません。 「高さ:100%」を「ストリップ」divとその親にのみ使用すると、何もしないように見えます。私も "position:absolute; top:0; bottom:0"を試みました。これも何もしませんでした。 divは消えます(それには何も含まれていないので、背景イメージです)。

次に、http://www.cssnewbie.com/equal-height-columns-with-jquery/にあるjQueryプラグインを試しましたが、正しく呼び出す方法がわからなかったり、ページ内の何かが動作しないようにしていました。あなたについてだけのコンテンツのdivの内側に背景画像としてサイドバーを入れて、それが左を下に実行させるために、メインのコンテンツのdivに

background: url('image.jpg') repeat-y; 
padding-left: 210px; 

を使用する方法

+0

あなたの問題は、サイドバーがフッターに伸びていないことですか?あなたは問題が何であるか正確にちょっと曇ります。 –

+0

はい。ピクセル単位で高さを宣言すれば、それを表示することしかできません。長いページでは長く伸ばし、短いものでは伸ばしてください。 – poetiscariot

答えて

0

。このように:http://jsfiddle.net/JMC_Creative/dMbmP/

あなたのサンプルページとまったく同じ結果は得られませんが、そこから何かを外挿することができますか?

+0

それは垂直なので 'repeat-y'が必要です(あなたのフィドルでもそうです)。' Repeat-x'は動作しません。 –

+0

@JTもちろん。ありがとう、それは私が意味するものです。 – JakeParis

+0

私には起こっていなかったような背景をぶつける。私はまだdivをストリップ自体の形にする必要があると思うので、私は影を起こすことができます。 – poetiscariot

0

相対サイズが正しく機能するようにするには、親オブジェクトと子オブジェクトに「位置:相対」を指定する必要があります。親には、静的、相対または絶対のいずれかの高さが指定されている必要があります。

第2に、同じ高さの列が必要なので、メイン列を作成する必要があるため、サイド列はメイン列の子として存在する必要があります。次に、左の列には負の左マージンを、右の列には負の右マージンを宣言します。それは誰もが使うトリックです。

+0

そのトリックを見たことはありません。負のマージンは何をするのですか? – JakeParis

+0

私はこれがどのように動作するか見ていません - どちらかを挙げることができますか?私は、私が見たバリエーションのどれかがマージンをそのように使うとは思わない。 – poetiscariot

+0

これをチェックすると、[液体レイアウト](http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/)と呼ばれています。 その属性を受け取るために列が中央の列の子である必要があるという考えがありますが、これは文字通り親列でなければならないということを必ずしも意味しません。 – Jamie

関連する問題