Question

快速提问：

如何创建一个所有元素的布局＆＃39;背景延伸到屏幕的宽度，但内容保持狭窄，让我们说1000px？我想找到这样的东西：

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

为了记录，我知道如何编码，我只是不知道最好的方法是什么。我确信这是一个最好的做法＆＃39;为了实现这一目标并且仅构建了100％宽度的仪表板，我从未使用它。

任何提示？

Answer 1

您只需组合两个元素，一个适合窗口（可以应用一些背景和其他样式覆盖视口），另一个容器位于页面中心。我建议您使用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，这就是我想要的。我最终创建了一个可用于所有元素的包装类，并使用单个类进行样式设置。内部包含标题，主页，页脚等内容，并根据屏幕分辨率对媒体查询进行缩放。

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

再次感谢！

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

3 个答案: