サイトの DIV レイアウトについてサポートが必要です

StackOverflow https://stackoverflow.com/questions/964959

  •  12-09-2019
  •  | 
  •  

質問

次の内容を含むページを構築しようとしています。

すでに以下のものがあります。

  • ページ全体を幅 809 ピクセルで中央に配置するには、ページに 1 つの div を追加します。
  • 内部 <div class="page"> は次のとおりです。
    • <div class="header">
    • <div class="container"> (コンテンツ用のコンテナ)
    • <div class="footer">

私が苦労していること:

  • <div class="container"> 以下を含める必要があります:
    • 一番左 <div class="leftShadow"> コンテナまでの高さを 100%、左の影画像を背景として使用 <div class="leftShadow">
    • 左から2番目 <div class="custom_content"> コンテナまでの高さ 100% (ページのコンテンツが含まれます)
    • 右から2番目 <div class="sidebar_right"> コンテナまでの高さが 100% (追加のリンクが含まれます)
    • 一番右 <div class="rightShadow"> コンテナまでの高さを 100%、背景として右の影画像を使用 <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_right div の長さが他の div よりも低い場合、もう 1 つの div は高さが伸びて、より長い div と同じになります。明らかに、両側の div (leftShadow と rightShadow) もコンテナの高さの 100% まで伸びる必要があります。

誰かが私を正しい方向に導いてくれませんか？基本的に、これらの div は、1 つの TD のコンテンツが他の TD の高さを超えた場合のテーブルと同様に動作する必要があります。

役に立ちましたか？

解決

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

leftShadowとrightShadowのdivは完全に不要です。単一のイメージにあなたの背景画像を合成して、コンテナのdivの背景として設定します。

背景画像は、コンテナの高さを満たすことを確認するには、設定された背景リピート：リピート-Y

所属していません StackOverflow
scroll top