如何将块的背景拉伸到屏幕的整个宽度？

Question

这是布局中的常见情况。我需要内容宽度为1170像素，并且内容要在页面上居中。但是，在某些情况下，我想将块拉伸到整个宽度。我该怎么办？ 有我的例子：

<div class="page__wrapper">

    <header class="header">
        <!-- .header__header-content.header-content>.header-content__header-top.header-top -->
        <div class="wrapper-try1"><div class="wrapper-try1__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio labore debitis voluptates quisquam, earum nemo, ipsam consequuntur cum rem, sint, nulla repellendus. Repellendus ea distinctio similique fuga dolores consequatur minima..</div></div>

        <div class="try2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo autem et nihil consequuntur incidunt veritatis est, earum deleniti vel rem. Minus ad, tenetur enim repellendus molestias vel possimus voluptas alias soluta atque eum officia facilis quia magni recusandae expedita, vitae numquam porro ipsum repudiandae. Ipsam perspiciatis est unde laboriosam eligendi.</div>
    </header>

</div>

和CSS：

.page__wrapper{
    position: absolute;
    top: 0;
    left: 0;
}

.wrapper-try1__content,
.try2{
    width: 1170px;
    margin: 0 auto;
}

.wrapper-try1{
    background-color: #000000;
    width: 100vw;
    margin-bottom: 10px;
}

.wrapper-try1__content{
    color: #ffffff;
}

它应该看起来像这样：

Answer 1

只有一项更改可以解决此问题：

.wrapper-try1__content,
.try2{
    max-width: 1170px;
    margin: 0 auto;
}

如果要在不同尺寸的窗口（如移动设备等）中使用不同的宽度，则可以使用媒体查询CSS（如

）

@media screen and (max-width: 992px) {
    .wrapper-try1__content,
    .try2{
        max-width: 1170px;
        margin: 0 auto;
    }
}

有关更多信息，请检查https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries