1

次のようなページを作成しようとしています。

すでに次のものがあります。

  • 幅 809px のページ全体を中央に配置するページの 1 つの div
  • 中身<div class="page">は以下です。
    • <div class="header">
    • <div class="container">(コンテンツ用のコンテナ)
    • <div class="footer">

私が苦労していること：

  • <div class="container">以下を含める必要があります。
    • コンテナの高さ 100% の左端<div class="leftShadow">、左の影の画像を背景として<div class="leftShadow">
    • 左から 2 番目、<div class="custom_content">コンテナーまでの高さ 100% (ページのコンテンツが含まれます)
    • コンテナまでの高さが 100%の右から 2 番目<div class="sidebar_right">(追加のリンクが含まれます)
    • コンテナの高さ 100% の右端<div class="rightShadow">、右の影の画像を背景として<div class="rightShadow">

要約すると：

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

したがって、どちらかcustom_contentまたはsidebar_rightdiv の長さが他方より下にある場合、もう一方の高さが長い div と同じになるように伸びます。明らかに、両側の div (leftShadow と rightShadow) もコンテナーの高さの 100% まで伸ばす必要があります。

誰かが私を正しい方向に導いてくれますか? 基本的に、これらの div は、1 つの td のコンテンツが他の td の高さを超えて伸びている場合のテーブルのように動作する必要があります。

4

4 に答える 4

4

テーブルのような div を使用しないでください。

leftShadow および rightShadow div は完全に不要です。背景画像を 1 つの画像に結合し、それをコンテナー div の背景として設定します。

背景画像がコンテナの高さいっぱいになるようにするには、background-repeat:repeat-y を設定します。

于 2009-06-08T13:42:50.820 に答える
1

「Faux Columns」のようなものを使用してみませんか?

http://www.alistapart.com/articles/fauxcolumns/を参照してください。

于 2009-06-08T13:44:03.377 に答える
0

div をテーブルのように動作させないため、これは別の方法で行います。

これをどのように見せたいのか完全にはわかりませんが、コンテナ div の左側と右側にある種の影の画像が必要だと思います。leftShadow と rightShadow の div を削除し、幅 809 ピクセルのコンテンツ div に繰り返し可能な背景画像を配置します (影の画像がどのように見えるかに応じて、高さ 1 になる可能性があります)。また、コンテンツ div に overflow:hidden を設定することもできます。私の記憶が正しければ、これは、この状況で含まれている div を引き延ばす一種のハックです。

于 2009-06-08T13:49:45.703 に答える
0

おそらく leftShadow と rightShadow の div は必要ないでしょう: faux columnsを見てください。

これはあなたが探しているものです、私は願っています。:)

于 2009-06-08T13:45:58.113 に答える