☰

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

tag-icon • tag-icon css html
CSS を使用して子 DIV の幅を親 DIV より広くする方法はありますか? 質問する

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

以下の例を参照してください。ここに画像の説明を入力してください

子 DIV は親 div の子のままでなければなりません。子 div に任意の負のマージンを設定して幅を広くすることはできますが、基本的にブラウザの幅の 100% にする方法がわかりません。

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

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

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

アップデート

ご回答ありがとうございます。これまでのところ、最も近い答えは、子を DIV にしてposition: absolute、左と右のプロパティを 0 に設定することのようです。

次に問題となるのは、親に があることですposition: relative。つまり、left と right のプロパティは、ブラウザではなく親 div を基準としています。次の例を参照してください。jsfiddle.net/v2Tja/2

position: relative他のすべてを台無しにせずに親から を削除することはできません。

ベストアンサー1

子要素をドキュメント フロー内に保持する一般的なソリューションを次に示します。

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

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

デモ：

* {
  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そして計算()一般的には IE9 以降とみなされます。

注:これはボックスモデルが次のように設定されていることを前提としています。border-boxがなければborder-box、パディングと境界線も減算する必要があり、このソリューションは混乱を招きます。

注:一部のブラウザでは、オーバーフローがないにもかかわらず水平スクロールバーが表示される場合があるため、スクロール コンテナーの水平オーバーフローを非表示にすることをお勧めします。

おすすめ記事