html - 如何将 block 的背景拉伸(stretch)到屏幕的全宽？

Question

这是布局中的常见情况。我需要内容宽度为 1170 像素并且内容在页面上居中。但是，在某些情况下，我想将 block 拉伸(stretch)到全宽。我该怎么做？ 有我的例子:

<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