BinaryDevelop
  1. ホーム
  2. css

[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法

2022-02-11 12:20:55

質問

レスポンシブグリッドの一部として使用する、包含DIVがあります。これは、私が許容する最大幅1280pxまで拡大され、その後、大きなデバイスのために余白が表示されます。以下は、私のCSSとLessの一部です。 

.container
{
    margin-left:auto;
    margin-right:auto;
    max-width:1280px;
    padding:0 30px;
    width:100%;

    &:extend(.clearfix all);
}

しかし、場合によっては、横方向にオーバーフローさせたいと思っています。例えば、背景画像や色を全幅にする必要がある場合です。私はCSSが得意ではありませんが、私が望むものを実現することは可能でしょうか？

どのように解決するのですか？

最も明白な解決策は、コンテナを閉じて、全幅の div を作成し、新しいコンテナを開くことです。コンテナ」というタイトルは単なるクラスであり、「コンテナ」を保持することが絶対条件というわけではありません。 すべて同時に .

この例では、全幅のdivに背景色を適用していますが、その際に 必要 は、内部の制限された div に色を適用する必要があります。 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

しかし、一部の人は シングル もし背景が必要なら、このような擬似要素を使用することができます。 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.mydiv:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
  z-index: -1;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
  </div>
  <footer></footer>
</div>

をサポートします。 vw は IE9+ - 参照 http://caniuse.com/#feat=viewport-units

100%ワイドのdivに実際のコンテンツが必要で、コンテナを自由に開閉できない場合があります（スライダーを後付けするためなど）。

そのような場合は 新しい div の高さが既知である場合 同じ手法で、ビューポート幅100%になるように配置することができます。 

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.myslider {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <div class="myslider">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
  <footer></footer>
</div>

JSfiddleデモ

注 100vw がオーバーフローを起こし、水平スクロールバーが表示されることがあります。 overflow-x:hidden を使用します。 <body> 他のものはすべてコンテナの中に入っているので、問題ないはずです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します