1

私は明らかに多くの人に頭痛の種を引き起こしているこのことをやろうとしており、いくつかの近い解決策を見つけましたが、私が必要としているものではありません. 左のサイドバー div と右のメイン コンテンツ div が必要です。それらの下に、フッター。サイドバーでは、背景画像で塗りつぶされた div の上から下までストリップを実行したいのですが、メイン コンテンツの div の高さに合わせて、フッターの上で停止させたいと思います。

私が求めているものを見たい場合は、http://lumn.net/about.htmlにサンプルページを掲載しています。どのリンクもアクティブではなく、コードは非常に厄介です。私は今週、文字通り CSS を独学しています。しかし、少なくとも私が想像しているレイアウトを見ることができます。

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

次に、 http: //www.cssnewbie.com/equal-height-columns-with-jquery/ で見つけた jQuery プラグインを試してみましたが、正しく呼び出す方法がわからなかったか、ページの何かがそれを妨げていました働くことから。

4

2 に答える 2

0

コンテンツ div 内の背景画像としてサイドバーを配置して使用するだけではどうですか

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

メイン コンテンツの div で、左下に実行するようにします。このように: http://jsfiddle.net/JMC_Creative/dMbmP/

サンプルページとまったく同じ結果が得られないことはわかっていますが、それから何かを推測して、あなたのために働くことができますか?

于 2012-05-05T00:46:14.987 に答える
0

相対サイズが適切に機能するためには、親オブジェクトと子オブジェクトに "position:relative" を指定する必要があり、親には高さ (静的、相対、または絶対) を指定する必要があります。

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

于 2012-05-05T01:04:41.997 に答える