Question

如何在div之外扩展背景颜色？我的代码：

teamcity.build.workingdirectory

outputFile

问题在于我正在滚动（水平）并且我不想要那个...我想要的是红色部分在黑色之后被扩展，所以它在任何分辨率下到达屏幕的边缘但是没有滚动...如果我添加溢出：隐藏，它不能解决问题。

有什么想法吗？

感谢。

Answer 1

将伪移动到左侧，并使此宽度为1000像素。

在右侧设置阴影，偏移量为1000px，颜色为红色

.main{
  background-color: #000;
  height: 500px;
}
.content-right{
    background-color: blue;
    padding: 10px;
    position: relative;
    height: 100px;
}
.content-right:after{
    position: absolute;
    top: 0;
    right: 0px;
    width: 1000px;
    height: 100%;
    background-color: transparent;
    box-shadow: 1000px 0px red;
    content: "";
    z-index: -1;
  }

fiddle

注意：现在伪元素可能在边界之外，但在左边。超出界限到左侧或上侧的元素不会生成滚动条。

另一方面，阴影向右延伸。但是在计算布局时没有考虑阴影，所以这也不会产生滚动条。

Answer 2

快速修复，但基本上我使文档的overflow-x值为hidden，因此它永远不会产生水平滚动条。如果这是一个问题，我可以尝试考虑一个更好的解决方案，但这是我到目前为止。

JSFiddle：https://jsfiddle.net/m4f4x3bt/3/

html, body{
  overflow-x: hidden;
}

div之外的背景颜色

2 个答案: