web-dev-qa-db-ja.com

画面全体に広がるがbodyタグにはない水平バーを作成するにはどうすればよいですか？

非常に基本的な質問です！

Bodyタグ全体で繰り返される背景パターンがあります。また、トップバーとボトムバー（ヘッド/フッター）をx軸で繰り返して、背景に無地、パターン、無地の素敵なサンドイッチスタイルを作成したいと思います。

これはどのように達成できますか？

バーは100％の幅である必要があります。これが、幅が1000pxに設定されているため、コンテンツラッパーまたはヘッダー/フッターdivを介して行われない理由です。カラーバーは画面全体に表示されます。

cssbackgroundrepeat
7
Tigger

あなたがすべき：

  • html, body { margin: 0; padding: 0 }があることを確認してください
  • 「コンテンツラッパー」の外側に#headerBarと#footerBarを追加します。

このようなもの： http://jsfiddle.net/GDDA5/

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

または、バーをビューポートに固定してコンテンツの背後に配置する場合： http://jsfiddle.net/GDDA5/3/

6
thirtydot

私はここでパリティに遅れていますが、css3を使用してください！

#selector:after { content: '|' }
0
jahrichie

コンテンツラッパーdivからフッターdivを削除すると、ボディ幅のサイズが自動的に取得され、探している効果が得られます。

0
Etorres