CSSを使用して子DIVの幅を親DIVよりも広くする方法はありますか？

親よりも広い親コンテナーDIV内に子DIVを配置する方法はありますか？子DIVはブラウザのビューポートと同じ幅である必要があります。

以下の例をご覧ください。

子DIV は親divの子としてとどまる必要があります。子divに任意の負のマージンを設定してそれを広くすることができることはわかっていますが、本質的にブラウザの100％の幅にする方法を見つけることができません。

私はこれができることを知っています：

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

しかし、私は子が動的であるブラウザと同じ幅である必要があります。

更新

あなたの答えをありがとう、これまでのところ最も近い答えは、子のDIV位置を絶対にして、leftプロパティとrightプロパティを0に設定することです。

次の問題は、親に位置：相対があることです。これは、左と右のプロパティが依然としてブラウザーではなく親divに相対的であることを意味します。ここの例を参照してください：jsfiddle.net/v2Tja/2

他のすべてを台無しにしない限り、親からの相対位置を削除することはできません。

絶対配置を使用する

.child-div {
    position:absolute;
    left:0;
    right:0;
}

ドキュメントフローで子要素を保持する一般的なソリューションは次のとおりです。

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

width子要素のをビューポートの幅全体に設定しleft、ビューポートの半分の距離から親要素の幅の50％を引いた距離に移動して、画面の端に合わせます。

デモ：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

vwおよびcalc（）のブラウザーサポートは、一般にIE9以降と見なされます。

注：これは、ボックスモデルがに設定されていることを前提としていますborder-box。がなければborder-box、パディングとボーダーを差し引く必要があるため、このソリューションは混乱します。

注：一部のブラウザーではオーバーフローがなくても水平スクロールバーを表示するように選択している場合があるため、スクロールコンテナーの水平オーバーフローを非表示にすることをお勧めします。

私はこの問題の解決策を長い間探し求めてきました。理想的には、親よりも子を大きくしたいが、親の制約を事前に知る必要がない。

そして、私はついにここで素晴らしい一般的な答えを見つけました。そのままコピー：

ここでの考え方は、コンテナをブラウザウィンドウの真ん中に左：50％でプッシュし、マイナス50vwのマージンで左端に戻します。

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

あなたの提案の元の提案（負のマージンの設定）に基づいて、動的ブラウザー幅のパーセント単位を使用して同様の方法を考え出しました：

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS：

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

負のマージンにより、コンテンツが親DIVから流出します。したがってpadding: 0 100%;、コンテンツをChlid DIVの元の境界に戻すようにを設定しました。

負のマージンも.child-divの合計幅をブラウザのビューポートから広げ、水平スクロールになります。したがってoverflow-x: hidden、Grandparent DIV（親Divの親）にを適用して、押し出し幅をクリップする必要があります。

これがJSfiddleです

Nils Kasperssonを試してみましたleft: calc(-50vw + 50%)。Safariブラウザーが正しく機能しないことが判明するまで、ChromeとFF（IEについてはまだわかりません）で完全に問題なく動作しました。私が実際にこの単純な方法を気に入ったら、すぐに修正してくれるといいのですが。

これにより、親DIV要素が position:relative

この回避策の方法の2つの欠点は次のとおりです。

• 追加のマークアップが必要です（つまり、祖父母の要素（良いol 'テーブルの垂直方向のalignメソッドと同じように...）
• Child DIVの左と右の境界は、ブラウザーのビューポートの外側にあるという理由だけで表示されることはありません。

この方法で問題が見つかった場合はお知らせください;）。それが役に立てば幸い。

Flexboxを使用すると、3行のCSSを使用して、子を親より広くすることができます。

一人っ子のdisplay、margin-leftおよびwidth設定する必要があります。margin-left子供のに依存しwidthます。式は次のとおりです。

margin-left: calc(-.5 * var(--child-width) + 50%);

CSS変数を使用すると、手動で左マージンを計算する必要がなくなります。

デモ＃1：手動計算

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

デモ＃2：CSS変数の使用

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

私はこれを使いました：

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

あなたは位置を試すことができます：絶対。幅と高さを与える、上： '上からのy軸'と左： 'x軸'

同様の問題がありました。子要素のコンテンツは親要素にとどまるはずでしたが、背景はビューポートの幅全体を拡張する必要がありました。

子要素position: relativeを作成し、それに擬似要素（:before）を追加することで、この問題を解決しましたposition: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;。疑似要素は、疑似背景要素として実際の子の後ろに残ります。これはすべてのブラウザーで機能します（IE8以降やSafari 6以降も-古いバージョンをテストする可能性はありません）。

小さなフィドルの例：http : //jsfiddle.net/vccv39j9/

Nils Kasperssonのソリューションに加えて、垂直スクロールバーの幅も解決しています。16px例として使用していますが、ビューポートの幅から差し引かれています。これにより、水平スクロールバーが表示されなくなります。

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

親の幅が固定されていて、#page { width: 1000px; }中央#page { margin: auto; }に配置されていると仮定すると、子がブラウザのビューポートの幅に合わせられるようにしたいだけです。

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

子divをコンテンツと同じ幅にするには、次のことを試してください。

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

私はこれが古いことを知っていますが、答えを求めてこれに来る人は誰でもそうするでしょう：

本文などの親要素を含む要素で非表示のオーバーフロー。

子要素にページよりもはるかに広い幅を与え、-100％だけ左に配置します。

以下に例を示します。

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

また、JSフィドルはこちらです：http：//jsfiddle.net/v2Tja/288/

次に、解決策は次のようになります。

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

私はあなたの解決策のいくつかを試しました。これです ：

margin: 0px -100%;
padding: 0 100%;

小さい画面に追加のcssは必要ないため、これは断然最高です。結果を表示するためにcodePenを作成しました。背景画像を含む親divと、内部コンテンツを含む子divon divを使用しました。

https://codepen.io/yuyazz/pen/BaoqBBq