ブラウザーと同じ幅にする必要がある要素 (私の場合は HR タグ) がありますが、親コンテナーよりも幅が広くなっています。ただし、ページとともに垂直方向にスクロールできるように、相対的な位置を維持する必要があります。問題は、私の親 div にも相対的な配置が必要なことです (他のレイアウトが機能しているため)。
これを解決できた唯一の方法は、HR タグの幅を 3000px に設定し、左側の位置を -1000px に設定することです。これは機能しますが、ページに水平スクロールバーを追加します (3000px 幅を表示するため)。これをきれいに達成する方法はありますか(水平スクロールバーなし)? 私のフィドルはhttp://jsfiddle.net/UGwst/で見ることができます。
HTMLは次のとおりです。
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
CSSは次のとおりです。
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
ここには類似した他の質問がいくつかあることを認識していますが、この問題を完全には解決していないようです。