html - 将右侧边栏背景拉伸(stretch)到屏幕的右边缘

Question

.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 1

如果你想要你的 container要保持 400px 宽(我假设你想要)，你可以为 body 分配一个颜色突然变化 50% 的线性渐变背景。如下所示。 (还要在正文中添加 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>