完整的背景和固定的内容答案

【问题标题】：Full with background with fixed with content完整的背景和固定的内容
【发布时间】：2019-03-01 12:34:16
【问题描述】：

我有以下两个总宽度应为 1400 像素的容器。我的代码中的问题是，当我希望两个容器为 1400 像素时，背景不是 100% 宽度。

我怎样才能以最好的方式实现这一目标？我希望你们能解决我的问题。

我正在使用以下代码：

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px;
}

#left-container {
  width: 50%;
  background: blue;
  float: left;
}

#right-container {
  width: 50%;
  background: green;
  float: left;
}

<div class="wrapper">

  <div id="left-container">

    <h2>Left container</h2>

  </div>

  <div id="right-container">

    <h2>Right container</h2>

  </div>

</div>

【问题讨论】：

在容器上？请您具体说明一下好吗？
不是全宽，因为你设置了“padding: 0 50px;”这意味着从左右 50px 的填充。
让我直截了当地说：您想让背景在页面的整个宽度上展开（即使页面超过 1400 像素），同时让容器为 700 像素？
@Iulius 是的，唯一重要的是两个容器的总大小为 1400px，以便与布局的其余部分匹配

标签： html css layout grid css-position

【解决方案1】：

除了背景之外，您还可以使用伪元素进行着色，并且可以有一些溢出：

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding:0 50px;
}

#left-container {
  width: 50%;
  background: blue;
  float: left;
  position:relative;
}
#left-container:before {
  content:"";
  position:absolute;
  left:-100vw;
  right:100%;
  top:0;
  bottom:0;
  background:inherit;
}

#right-container {
  width: 50%;
  background: green;
  float: left;
  position:relative;
}
#right-container:before {
  content:"";
  position:absolute;
  right:-100vw;
  left:100%;
  top:0;
  bottom:0;
  background:inherit;
}
body {
 overflow:hidden;
}

<div class="wrapper">

  <div id="left-container">

    <h2>Left container</h2>

  </div>

  <div id="right-container">

    <h2>Right container</h2>

  </div>

</div>

【讨论】：

【解决方案2】：

可以通过多种方式完成。我现在能想到的最简单的解决方案就是添加一个容器并使用线性渐变：

body {margin:0; padding:0;}
.container {
  background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
  border: 1px solid white;
  max-width: 1400px;
  margin: 0 auto;
  overflow: auto;
}

#left-container,
#right-container{
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 50px;
}

<div class="container">
  <div class="wrapper">
    <div id="left-container">
      <h2>Left container</h2>
    </div>
    <div id="right-container">
      <h2>Right container</h2>
    </div>
  </div>  
</div>

【讨论】：