Цвет фона не будет расширяться за видимую область в блоке div с полосами прокрутки - PullRequest
1 голос
/ 25 июня 2011

[ЗАКРЫТО]

На этой странице есть поле div, содержащее пример кода, где определенной строке должен быть задан цвет фона. Этот цвет фона на самом деле делается с помощью регулярных выражений, чтобы заменить начальный и конечный символы кодом, чтобы сделать div с нашим красным фоном. Это отлично работает, у нас есть красный фон, регулярные выражения делают свою работу.

Однако, если мы прокручиваем немного в поле кода, мы замечаем, что красный фоновый цвет останавливается там, где находится фактический край поля кода (но мы можем прокрутить, так что это не конец). Это должно проиллюстрировать, что я имею в виду: Figure One: Our background color terminating before it should be

Я пробовал почти все значения CSS, которые я мог придумать с помощью firebug, в том числе пробовал все возможные варианты переполнения. Что касается ширины, если я вручную задаю абсолютную ширину, она может быть расширена еще больше, но этого не произойдет, потому что окрашивание фона генерируется автоматически, при этом JavaScript использует метод с хорошим запасным вариантом в случае, если JavaScript не загружается или отключается.

Итак, кто-нибудь знает способ получить эти фоны вплоть до конца? Я подумал о подсчете символов, но, поскольку цвета фона часто занимают не одну строку, а даже сотни строк на некоторых других страницах, это кажется непрактичным и скорее ресурсом. Было бы предпочтительнее использовать метод CSS, хотя, если он дойдет до этого, я пойду с исправлением JavaScript.

Если вы хотите взглянуть на страницу сами, не стесняйтесь, это просто песочница, показывающая конкретную проблему, и найден скрипт, который заменяет определенные комментарии элементами div, чтобы создать фоновое изображение здесь .

Заранее благодарим за любую помощь и / или совет.

1 Ответ

0 голосов
/ 25 июня 2011

<pre> и overflow:auto не очень хорошо играют вместе и, вероятно, являются основой вашей проблемы

Попробуйте использовать <div> в качестве контейнера прокрутки.

Итак:

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

Вместо

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