DIVの目的は内部要素を含むことだと私は理解しています - そうでなければ誰かを怒らせたくありませんでした。ただし、次のシナリオを考慮してください：divコンテナの境界をエスケープする
私のWebページ（ページ全体の70％の幅しか占めません）はコンテナ（div）で囲まれています。しかし、ページの上部にあるナビゲーションバーの下には、ページ全体の幅の100％を占めるwバナーを作成したいと考えています（つまり、コンテナの範囲外にコンテナはページの幅の70％しか占めていません）。
これは私が達成しようとしている基本的な考え方です：http://www.petersonassociates.biz/
誰もが、私はこれを実現できるかについての提案を持っていますか？私はどんな助けにも感謝しています。
エヴァン
私が正しく理解している場合、
style="width: 100%; position:absolute;"
はあなたが行っているものを達成すべきです。
もっと意味的に正しい方法は、position:absoluteを避けてヘッダーをメインコンテナの外側に置くことです。
：
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
他の方法は、（<section class="main-content">でそれを維持）あなたが言ったようにDIV（またはセクション）として、誤っている要素を含むことになっている、彼らはの境界の外に拡張していません親のdiv /セクション。また、あなたの子divが親divの外側に広がっている場合、IEの問題に直面するでしょう（私は7またはそれ以下のものを信じます、これはIE6以下かもしれません）。
+1これは私がやる方法に近いですが、' .header'スタイルの幅宣言を残すことができます（あるいは 'width：auto'を実行することもできます）。デフォルトではブロックレベル要素は要素を含む要素と同じ幅です。そうすることで、マージン/パディングを追加する際に問題にぶつからないようになります。私はこれがより意味論的な方法であるとは言いませんが、それほど面倒ではありません。 – Brent
両方とも、私はヘッダの不要なCSSを削除するために上で編集し、HTML5要素を使用してコードをより意味論的にしています...正しい単語ではないかもしれません） –
これを行う方法はいくつかあります。
絶対位置
他の人が示唆していると同じように、あなたは100％の幅と絶対位置のページのCSSプロパティを渡ってストレッチしたい要素を与えれば、それはページの幅全体に及ぶだろう。
しかし、それはおそらくあなたの今の100％のコンテンツのための余裕がない他のコンテンツを隠して、おそらくページの上部に位置します。絶対配置は、ドキュメントフローから要素を削除するので、新しく配置されたコンテンツが存在しないかのように動作します。あなたの新しい要素がどこにあるべきかを正確に計算してそれに余裕を持たせる準備ができていない限り、これはおそらく最良の方法ではありません。
画像：画像：画像のコレクションを使用することもできますが、それを更新したりページのどの部分の高さを変更したりすることもできます。
ネストされたDIV
これは私があなたに提案する方法です。 100％の幅のものについて心配する前に、まず70％の中心にある外観を設定する方法を説明します。このようなCSSで
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
：
.center {
width: 70%;
margin: 0 auto;
}
今、あなたは、実際にページを下に移動コンテンツの各行は、で構成されたときには、あなたの中心のコンテンツの周囲の容器であることをを思われるものを持っていますセマンティックで記述的なクラス（header、mainContentなど）を含むdivを含み、その中に "center"クラスがあります。それと
はヘッダーを作り、設定は「コンテナのdivの脱却」に見えるのと同じくらい簡単です：
.header {
background-color: navy;
}
と色がページの端に到達しました。何らかの理由であなたがページ全体に伸ばすコンテンツ自体をしたい場合は、行うことができます：
.header .center {
width: auto;
}
そして、そのスタイルが.centerスタイルをオーバーライドし、ヘッダの内容は、ページの端に延長するだろうし。
幸運を祈る！
要素の背景をページ全体に広げたい場合は、これもマイナスのマージンで行うことができます。一言で言えば
（コメントから訂正）：あなたがして削除、水平スクロールバーを与える.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
：
body {overflow-x: hidden; }
ガイドはhttp://www.sitepoint.com/css-extend-full-width-bars/です。 これは擬似要素でこれを行うより意味があるかもしれません：http://css-tricks.com/full-browser-width-bars/
私はすべての解決策が古くなっていると思います。
要素の境界を脱出するための最良の方法は、追加することです：
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
議論がhereとhereを見つけることができます。今後のgrid-layoutsの素晴らしい解決策もあります。
このコメントは非常に便利でした。マテリアライズCSSグリッドレイアウトコンテナから抜け出すための素晴らしいソリューションを見つけようとしていましたが、これがトリックでした – CDerrig
その特定のサイトは、最も簡単な方法を使用しています。画像は次のとおりです。http://www.petersonassociates.biz/wp-content/themes/rapeterson/img/globalbg.jpg –
+1「私はしたくなかった誰にでも怒らせる " – Brent