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

.集装箱{ 宽度：400px； 保证金：0自动； } .主要内容{ 宽度：75%； 高度：500px； 背景色：红色； 浮动：左； } .侧边栏{ 宽度：25%； 高度：500px； 背景颜色：蓝色； 浮动：左； }

---

给你。灰色区域是您可以放置侧边栏的地方

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

.容器液体{ 浮动：左； 宽度：calc100%-330px+15px*2； 填充：0； } .盒子{ 位置：相对位置； 宽度：100%； 保证金：0自动； 填充：0； } .固定货柜{ 浮动：对； 宽度：300px； } .主要内容{ 宽度：继承； 高度：500px； 背景色：红色； 浮动：左； } .侧边栏{ 宽度：继承； 高度：500px； 背景颜色：蓝色； 浮动：左； } .侧边栏.侧边栏{ 宽度：50%； 高度：500px； 背景色：ccc； } 如果你想让你的容器保持400px的宽度，我假设你想要，你可以为身体指定一个线性渐变背景，颜色突变为50%，如下所示。同时在正文中添加边距：0以防止出现默认边距

身体{ 背景：向右线性梯度，fff 0%，fff 50%，00f 50%，00f 100%； 保证金：0； } .集装箱{ 宽度：400px； 保证金：0自动； } .主要内容{ 宽度：75%； 高度：500px； 背景色：红色； 浮动：左； } .侧边栏{ 宽度：25%； 高度：500px； 背景颜色：蓝色； 浮动：左； } 程序 要根据HTML布局实现所需效果，请将边栏宽度设置为100%视口宽度减去父容器宽度400px，再除以2，再加上容器宽度的25%，即25%+100vw-400px/2

然后将边距设置为右侧，将100%视口宽度的负值减去父容器宽度400px，再除以2，即25%+100vw-400px/2*-1

CSS 抬头根据设置的容器宽度更改值400px

测验

---

在侧边栏中填入大量内容以查看其实际操作。

我们需要查看一些代码以帮助您。你们可以发布你们的html和css，或者一个代码笔来演示你们的问题吗？把那个侧边栏放在父容器中，把它放在左边。为父级设置所需的宽度，并将其背景设置为蓝色。感谢您的回复Hewlett，但当我将屏幕大小设置为大于容器divs宽度时，蓝色右侧边栏仍应位于屏幕的右边缘。哦，很好，这是一个有趣的解决方案。我要试一试。谢谢

.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;
}