Возможно ли иметь 100% ширину экрана внутри ограниченного div с относительным положением? - PullRequest
1 голос
/ 12 февраля 2020

Интересно, возможно ли, чтобы div растягивался до 100vw, в то время как внутри relative родительского div с ограниченной шириной. И при этом также не теряется его высота внутри документа, как это было бы при установке абсолютного положения.

Возможно ли это с чистым css? Или мне нужно немного jQuery / JS?

body {
  background: #f0f0f0;
  text-align: center;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
}
<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

У кого-нибудь есть опыт, как заставить это работать? Любые советы очень ценятся. Спасибо!

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

Я использую relative с margin и left right, чтобы добиться этого

body {
  background: #f0f0f0;
  text-align: center;
  overflow: hidden;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

Ссылка

1 голос
/ 12 февраля 2020

Да, вы можете использовать ширину 100vw. Чтобы исправить положение, вы можете добавить margin-left: calc(-50vw + 50%);, который переместит его на половину ширины экрана влево, а затем на 50% от его собственной ширины вправо, тем самым снова «центрируя» его, что в этом случае приводит к элемент полной ширины:

body {
  background: #f0f0f0;
  text-align: center;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

Однако осталась одна проблема: как только содержимое будет длиннее, чем высота окна, появится горизонтальная полоса прокрутки. Ранее я поднимал эту проблему в этом вопросе , но я действительно не нашел решения или не получил удовлетворительного ответа на него.

...