Да, вы можете использовать ширину 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>
Однако осталась одна проблема: как только содержимое будет длиннее, чем высота окна, появится горизонтальная полоса прокрутки. Ранее я поднимал эту проблему в этом вопросе , но я действительно не нашел решения или не получил удовлетворительного ответа на него.