背景颜色不会超出带滚动条的 div 框中的可见区域

Question

[已关闭]

在此页面上，有一个 div 框，其中包含代码示例，其中应该为某一行指定背景颜色。这种背景颜色实际上是通过使用正则表达式将开始和结束符号替换为代码来制作带有红色背景的 div 来完成的。这工作得很好，我们有红色背景，正则表达式正在做他们的工作。

但是，如果我们在代码框中滚动一点，我们会注意到红色背景颜色停止在代码框的实际边缘所在的位置（但我们可以滚动，所以这不是结束）。这应该说明我的意思：

我已经尝试了几乎所有我能想到的与 firebug 相关的 CSS 值，包括尝试所有可能的溢出选项。对于宽度，如果我手动给出绝对宽度，它可以进一步扩展它，但这不会这样做，因为背景颜色是自动生成的，JavaScript 使用具有良好后备的方法，以防 JavaScript 加载失败或被禁用。

那么，有人知道如何让这些背景一直延伸到最后吗？我考虑过计算字符数，但由于背景颜色通常覆盖不止一行，甚至在其他页面上覆盖数百行，这似乎不切实际，而且相当资源化。首选 CSS 方法，但如果需要的话，我会使用 javascript 修复。

如果您想亲自查看该页面，请随意，该页面只是一个显示特定问题的沙箱，并且可以找到用 div 元素替换某些注释以制作此背景图片的脚本 此处。

预先感谢您的任何帮助和/或建议。

Answer 1

 和 overflow:auto 不能很好地协同工作，并且可能是问题的根源。

尝试使用

作为滚动容器。

所以：

<div style="overflow: auto">
  <pre>
    ...content...
  </pre>
</div>

而不是

<pre style="overflow: auto">
  ...content...
</pre>