のようなサイトレイアウトのCSSを使用するにはどうすればいいですか？webmaster.stackexchange.comサイトが中央で、ヘッダーとフッターがコンテンツが中央にある間にユーザーのウィンドウ解像度と同じ長さであるあなたが私を得ることはできません：あなたの助けに感謝します。StackExchangeのような伸縮可能なヘッダー
http://imageshack.us/photo/my-images/600/strectch.jpg/
右のソースをクリックしてご覧ください - 誰もあなたのことを禁じていません。
しかし、短期的に
- 可能な方法の一つは、（最高ではないかもしれない） - 中心にこのようになります内容：HTML
<body>
<div id="page-wrapper">
<div id="page-body">
<div id="header" class="clearfix">
...
CSS
#page-wrapper {width: 980px; margin: 0 auto; text-align: left;}
#page-body {position: absolute; width: 980px; top: 0;}
フッターに背景イメージを表示する場合は、少し異なる方法を使用する必要があります&ヘッダー全体の幅をカバーします。
ちょうどその時、このCSSを使用して、グラデーションを含む1x200（スキニーと背の高い）画像を作る：
#header-bg {
background: blue url(/my/stretchy/image.png) repeat-x top left;
text-align: center;
}
#header-content {
width: 800px;
margin: 0 auto;
text-align: left;
}
<div id="header-bg">
<div id="header-content">blah blah</div>
</div>
あなたは基本的には水平方向のタイルにそれを持っています。 #pageに
これは私が推測しますが、ヘッダー内のページの内容をラップする意味がわかりません。 –
<div id="topBar">My Epic Top Bar</div>
<div id="page">
All your lovely page junk goes here
</div>
html, body
{
margin:0;
padding:0;
}
#page
{
margin: 0 auto;
width:500px;
margin-top:40px;
background-color:blue;
}
#topBar {
width:100%;
height:40px;
background-color:#ccc;
position:absolute;
top:0;
left:0;
}
margin: 0 autoは、500pxなどの一定の幅を有しているので、それを中心に0に下/上余白及び自動車への右/左マージンを設定します。 #topBarが#pageのいずれかを覆わないように、トップマージンを#topBarの高さと同じにする必要があることに留意してください。
ブラウザとの一貫性のある方法は、固定幅のヘッダーコンテンツに自動幅ラッパーを設定します。
それをサポートするブラウザ用、あなたが利用することができます：前：後、余分なdiv要素なし全幅ヘッダーを達成するために：http://css-tricks.com/9443-full-browser-width-bars/
これは私のラインになるはずだった、「右のソースをクリックしてご覧ください誰もあなたにそれを禁じていない」 :-) – Kumar