背景颜色不会延伸到带有滚动条的div框中的可见区域

Question

[CLOSED]

在this page上，有一个div框，其中包含一个代码示例，其中某一行应该被赋予背景颜色。实际上，通过使用正则表达式将开始和结束符号替换为使用红色背景创建div的代码来完成此背景颜色。这很好用，我们有红色背景，正则表达式正在做他们的工作。

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

我几乎尝试过使用firebug可以想到的每个CSS值，包括尝试所有可能的溢出选项。对于宽度，如果我手动给出一个绝对宽度，它可以进一步扩展它，但这不会做，因为背景着色是自动生成的，javascript使用具有良好回退的方法，以防javascript无法加载或被禁用。

那么，有没有人知道如何让这些背景一直延伸到最后？我考虑过对字符进行计数，但由于背景颜色通常覆盖多行，甚至在其他页面上覆盖数百行，因此它似乎不切实际且非常有用。首选CSS方法，但如果它出现，我将使用javascript修复。

如果您想亲自查看页面，请随意，一个只是一个沙箱来显示特定问题，并且使用div元素替换某些注释以创建此背景图像的脚本{{ 3}}

提前感谢您提供任何帮助和/或建议。

Answer 1

<pre>和overflow:auto不能很好地结合在一起，很可能是你问题的基础。

尝试使用<div>作为滚动容器。

所以：

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

而不是

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