overflow-x: автоматическая проблема в firefox / т.е.

Question

У меня есть эта проблема с моим сайтом css overflow-x: auto; по совпадению, когда я пытаюсь на stackoverflow.com. Я могу видеть, что у stackoverflow также есть похожая проблема . когда я пытаюсь уменьшить размер окна браузера в браузере Firefox / Internet Explorer 7 . Я вижу часть экрана в верхнем правом углу, а нижний правый - неправильно отрисовывается. Это из-за переполнения-x: авто?

я прикрепил скриншот (скриншот 1, верхняя правая сторона, заголовок не отображается должным образом)

http://img12.imageshack.us/img12/43/stackoverflow2.png

(скриншот 2, правая нижняя часть, серый цвет отображается неправильно)

http://img204.imageshack.us/img204/4539/stackoverflow1.png

как решить эту проблему? если в состоянии решить эту проблему, а также в состоянии исправить мою проблему нашего сайта.

Answer 1

Нет, это не проблема overflow-x: auto. Это вызвано элементами с шириной: 100%, взаимодействующими с элементами фиксированной ширины в другом месте на странице. В случае SO #footer это ширина: 100% (неявно), тогда как #content объявлена ​​ширина: 960px.

Когда ширина страницы уменьшается ниже 960px, ширина #content заставляет браузер добавить горизонтальную полосу прокрутки (неявный overflow-x: auto). Поскольку для #footer задана ширина 100%, он расширяется только до 100% области просмотра, а раздел за полосой прокрутки не получает правильно добавленный цвет фона.

Чтобы это исправить, вы можете добавить объявление min-width к css:

#footer {
    min-width: 960px;
    /* other css goes m'ere */
}