如何在固定宽度元素上设置全屏宽度背景？

Question

我有动态高度和固定宽度（ Markup ）元素容器的简单结构。一方面，元素的背景应该跨越整个窗口宽度，另一方面，子元素的大小必须受容器的限制（下面的 Desired layout ）。儿童的数量及其大小（仅为简单起见，在图像上相同）是动态的。

这可能不添加额外的容器吗？我希望通过在子项上设置width来避免实现所需的元素内容宽度，因为它们的数量是动态的，并且大小关系变得复杂，除非它们的总宽度已经被容器的width限制。 / p>

这是一个pen来试验;

标记

<div class="container">
  <div class="child">
  <div class="child">
  ...
</div>

.container {
  width: <fixed-width>px;
}

所需的布局（子和容器之间的空格无关紧要）

Answer 1

我们可以采取的一种解决方法是在父容器填充上使用视口宽度，将强制子项放入一个宽度仅为500px的框中（根据您的代码集）。

在执行此操作时要记住的重要一点是，需要在容器上设置box-sizing:border-box;，否则padding会发生弹道。

我们使用calc，vw和padding来完成此操作。

padding: 20px calc(50vw - /*half of container width*/);

以下是链接的codepen上容器的完整扩展代码：

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 100%;
  padding: 20px calc(50vw - 250px);
  background-color: #acffac;
  background-size: 100vw auto;
  background-position: center top;
  box-sizing: border-box;
}

html {
  overflow-y:scroll; /* fixes potential calculation errors caused by scroll bar - thanks to Roberts comment */
}

Here's a working version of the codepen，为了将所有鸡蛋放在一个篮子里，这是一个可扩展的代码片段：

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 100%;
  padding: 20px calc(50vw - 250px);
  background-color: #acffac;
  background-size: 100vw auto;
  background-position: center top;
  box-sizing: border-box;
}

.child {
  flex: 1 0 auto;
  width: 100px;
  height: 100%;
  background-color: #ff4444;
}

.child+.child {
  margin-left: 20px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我最后指出，如果其他人有更好的解决方案，您可能希望暂时关注该问题，因为在较旧的vw内使用calc时会遇到一些问题版本Chrome and Safari。

修改

正如瓦迪姆和罗伯特的评论所指出的，有一些事情可能会导致一些障碍。

首先，假设你正在使用一个最小的模板（即没有normalize / reset.css），你的身体很可能仍然会有固有的边缘，这会使这种布局变得混乱。您可以通过以下方式解决此问题：

body {
    margin:0;
}

其次，根据您的操作系统（是的，我在看微软！），您的滚动条可以将您的内容推到一边，同时仍然包含在vw的计算中。

我们可以解决这两种方式之一。第一个是对填充计算进行调整以包括滚动条侧，但您必须编写脚本以确保滚动条实际存在，和滚动条的大小不同（IE - > 17px，边缘 - > 12px）。

另一种选择是使用自定义内容滚动条，它会对内容执行完整overflow:hidden;，从而删除滚动条，然后再实现它自己的滚动条版本（通常位于它的内容为position:fixed;）。

Answer 2

使用vw和flex，我们可以将子元素集中在一起，并完全满足您的需求。我写了JSfiddle，你可以在那里查看。

基本上我所做的是创建一个展示设置为flex的容器。使用第一个子元素的margin属性，我将所有其他子div中心，然后将常规属性添加到其他div。

这是代码

＆＃13;

＆＃13;

body{
  margin: 0;
  padding: 0;
}

#container{
  display: flex;
  width: 100vw;
  height: 40vw;
  background-color: #333333;
  align-items: center;
}

.child{
  width: 4vw;
  height: 80%;
  background-color: red;
  margin-right: 10vw;
}

.child:first-child{
  margin-left: 28vw;
}

＆＃13;

<div id="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;