将右侧边栏背景拉伸到屏幕右边缘

Question

＆＃13;

＆＃13;

.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}

＆＃13;

<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我正在尝试让右侧边栏的背景蓝色延伸到屏幕的右边缘。现在，侧边栏处于固定布局。图中的箭头表示我希望背景为蓝色。

编辑：根据要求添加了一些代码。

Answer 1

如果您希望container保持400px宽（我假设您想要），您可以将线性渐变背景指定为50％的突变颜色变为body，如下所示。 （同时将margin: 0添加到正文以防止默认边距。）

body {
  background: linear-gradient(to right, #fff 0%, #fff 50%, #00f 50%, #00f 100%);
  margin:0;
}
.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}

<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>

Answer 2

你走了。灰色区域是放置侧边栏的地方。

已更新：带有固定侧边栏的全宽容器。

.container-fluid {
  float: left;
  width: calc(100% - 330px + 15px * 2);
  padding: 0;
}

.box {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.fixed-container {
  float: right;
  width: 300px;
}

.main-content {
  width: inherit;
  height: 500px;
  background-color: red;
  float: left;
}

.sidebar {
  width: inherit;
  height: 500px;
  background-color: blue;
  float: left;
}

.sidebar .bar {
  width: 50%;
  height: 500px;
  background-color: #ccc;
}

<div class="container-fluid">
  <div class="box">
    <div class="main-content column">
      <div class="foo"></div>
    </div>
  </div>
</div>
<div class="fixed-container">
  <div class="sidebar column">
    <div class="bar"></div>
  </div>
</div>

Answer 3

程序

要根据 HTML 布局获得所需效果，请将侧边栏宽度设置为100%视口宽度减去父容器宽度400px除以{{1然后再加上容器的2宽度（即25%）。

然后将右边距设置为25% + (100vw - 400px) / 2视口宽度的负值减去父容器宽度100%除以400px（即2）。

CSS

25% + (100vw - 400px) / 2 * -1

抬头根据设置的.sidebar { width: calc(25% + calc(100vw - 400px /* 400px is the width of the .container */) / 2); margin-right: calc(calc(100vw - 400px /* 400px is the width of the .container */) / 2 * -1); height: 500px; background-color: blue; float:left; } 宽度更改值400px。

测试

在侧边栏中填写大量内容以查看其实际效果。