css - 幅100％、本体幅600pxのTopdiv

Question

div（トップバー）を作成しようとしています（幅= 100％;）。その下に、メインコンテンツと一緒にdivにメインコンテンツが必要です。これは、画面の幅と中央が600pxである必要があります。

通常、ボディ幅= 600px、マージン：autoに設定しますが、トップバーが短くなります。

これを行う最も簡単な方法は何ですか？

Answer 1

ボディ要素の幅に触れる必要はありません

#topbar {
    width:100%;
    height: 150px; // Whatever height you want
 }

 #mainContent {
   width: 600px;
   margin: 0 auto; // Center on the screen
 }

Answer 2

#topbar私の理解が正しければ、ブラウザ ウィンドウが 600px 未満の場合、現在行っていないページの幅を 100% 拡張したいと考えています...#maincontentページを 600px を超えて押し出すためですか?

ページの幅が 600px 未満の場合は、body { min-width:600px; }強制的に 600pxにする必要があると思います。topbar

これが潜在的な解決策のフィドルです: http://jsfiddle.net/z2dEK/1/

CSS は次のとおりです。

body {
    background:#ccc;
    min-width:600px;
}
#topbar {
    background:#000;
    height:100px;
    width:100%;
}
#maincontent {
    background:#fff;
    margin:auto;
    width:600px;
    height:100px;
}