0

私のhtmlページの本文は、以下に示すようにページの中央に配置されています:

<body style="margin:0 auto; width:75%">

このように、画面の幅全体に沿って拡大する背景色のストリップを配置したいと思います。

<body style="margin:0 auto; width:75%">
<div style=" margin-left:0; margin-right:0;width:100%; height:20px; background- color:
#e6e3e3;"></div>
</body>

ただし、これは機能していません。div 要素は、body 要素で指定された境界線を超えて展開されません。どのようにそれを行うことができますか？よろしくお願いします。

4

2 に答える 2

1

このようなことを達成しようとしていますか？

http://jsfiddle.net/TZ9Y7/

CSS:

html, body {
    height: 100%;
}

body{ margin:0 12.5%; border: 2px solid black; }

.div1 { 
    width: 100%;
    height: 30px;
    background: #ccc;
}

.div2 { 
    width: 100%;
    height: 30px;
    background: red;
    position: absolute;
    left: 0;
}

</p>

于 2012-09-21T12:40:09.063 に答える
1

javascript を使用してウィンドウの幅を検索し、プログラムで div の幅を設定する場合を除き、ページ構造を次のように微調整することをお勧めします。

<html>
  <body>
    <div style="margin:0, width:100%, padding:0"></div>
    <div class="content" style="margin:0 auto, width:75%"></div>
  </body>
</html>

body 要素全体を中央に配置する代わりに、'content' div を中央に配置します。これにより、コンテンツ div の外側に特定の要素を配置でき、ウィンドウ全体の幅にすることができます。

于 2012-09-21T12:29:18.903 に答える