1

CSSで次のレイアウトを作成しようとしています:

ここに画像の説明を入力

これは、幅が定義され、ページの中央に配置されたラッパー DIV にすべてのコンテンツが含まれる典型的な Web レイアウトです。

ただし、紫色の背景は CSS グラデーションであり、ブラウザーの幅全体を埋める必要があります (コンテンツ ラッパーの幅だけではありません)。さらに、ページごとに見出し/イントロ テキストの行が異なるため (たとえば、3 行のページもあれば、1 行だけのページもあります)、紫色の背景はこのコンテンツの高さと一致する必要があります。

また、すべてのコンテンツを幅があり、中央に配置されたラッパーに配置する CMS を使用していmargin:autoます。

どうすればレイアウトを実現できますか?

position:absolute最初は、見出し/イントロ div で使用できると思いました。これはうまくいきます。残りのコンテンツが見出し/イントロ div の後ろに隠されることを除いて。ここで例を参照してください: http://jsfiddle.net/5BkX6/1/

次にposition:relative、見出し/イントロ div で使用してから、負の左の値とパディングを使用して、コンテンツを中央に保ちながら DIV の背景を引き伸ばしてみました。ここで例を参照してください: http://jsfiddle.net/4DZYr/1/

この方法はうまく機能しますが、水平スクロール バーが作成されます。スクロール バーを非表示にするために、overflow-x:hidden をメイン ラッパーの DIV に適用できることはわかっていますが、そもそもスクロール バーを非表示にしたくありません。

どうすれば目標を達成できますか。見出し/イントロDIVの高さを取得するためにjqueryを使用したくありません。

4

1 に答える 1

1

これにより、必要なレイアウトが得られるはずです^^ここにHtmlがあります

<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
   <div class="content">
      <div class="left"></div>
      <div class="right"></div>
   </div>
</div>
</body>

で、スタイルはこちら

.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
于 2012-10-06T14:45:00.137 に答える