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

【问题标题】：How to stretch the background of the block to the full width of the screen?如何将块的背景拉伸到屏幕的整个宽度？
【发布时间】：2020-04-18 18:04:14
【问题描述】：

这是布局中的常见情况。我需要内容宽度为 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;
}

应该是这样的：

【问题讨论】：

看起来你有不同的屏幕尺寸，并且基于特定的尺寸，你需要 div 来获取特定的尺寸和位置，所以你有没有想过@media 看看developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

标签： html css layout position css-position

【解决方案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;
    }
}

【讨论】：