如何将块的背景拉伸到屏幕的全宽？

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;
}

如果您想要在不同大小的 window 中使用不同的宽度，例如移动设备等，那么您可以使用媒体查询 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

如何将块的背景拉伸到屏幕的全宽？

How to stretch the background of the block to the full width of the screen?

html

css

layout

position

css-position