CSS - как переполнение от div до полной ширины экрана

У меня есть DIV, который я использую как часть моей чувствительной сетки. Он расширяется до максимальной ширины, которую я допускаю, которая составляет 1280 пикселей, тогда поля появляются для больших устройств. Здесь мой CSS + немного меньше.

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

    &:extend(.clearfix all);
}

Однако в некоторых случаях я хотел бы переполнить боком - скажем, у меня есть фоновое изображение или цвет, который должен быть полной ширины. Я не очень хорош в CSS - но можно ли добиться того, чего я хочу?

Ответы

Ответ 1

Наиболее очевидным решением является только закрытие контейнера... у вас есть полная ширина 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>

Ответ 2

Я нашел этот супер полезный трюк, используя vw on margins (Источник)

Пример:

.inner-but-full {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
}

Демо:

html,body {
  overflow-x: hidden; /* Prevent scrollbar */
}

.inner-but-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 50px;
  background: rgba(28, 144, 243, 0.5);
}

.container {
  width: 300px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.5);
}

<div class="container">
  <div class="inner-but-full"></div>
</div>

Ответ 3

<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>