如何在屏幕上拉伸布局但保持内容更窄？

Question

快速提问：

如何创建一个布局，其中所有元素的背景都横跨屏幕宽度，但内容保持狭窄，比如说 1000 像素？我正在寻找类似这样的东西：

https://themeforest.net/item/itcore-site-template/3638733

郑重声明，我知道如何编码，只是不知道最好的方法是什么。我确定有一个 'best practice' 可以实现这一点，并且只构建了 100% 宽度的仪表板，我从未使用过它。

有什么建议吗？

Answer 1

您只需组合两个元素，一个适合 window（您可以在其上应用一些背景和覆盖视口的其他样式），另一个位于页面中央的容器。我建议您使用 max-width 以允许它在较小的设备上缩小。

<div class="section">
  <div class="wrapper">
    Some content
  </div>
</section>

那么你的CSS就和

一样简单

.section {
  background: (...)
  background-size: cover; /* stretch to cover the whole container */
}

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

看看CSS Background size property。可以指定单位为固定值，例如：

background-size: 100vw;

这将占据屏幕的宽度。

Answer 3

谢谢 LeBen，这正是我要找的。我最终创建了一个包装器 class，它可用于所有元素，并使用单独的 classes 进行样式设置。内部包含页眉、主要内容、页脚等内容，这些内容根据屏幕分辨率使用媒体查询进行缩放。

<div class="wrapper bgLight">
    <header>
        Header content goes here
    </header>
</div>

再次感谢！

如何在屏幕上拉伸布局但保持内容更窄？

how to stretch layout across screen but keep content narrower?

css

layout

stretch