Проблема с нижним колонтитулом на веб-странице при увеличении до 180% ширины исходной страницы

Question

ОБНОВЛЕНО С ЭКРАНОМ ПЕЧАТЬ ПРОБЛЕМЫ: Пожалуйста, обратитесь к приложенному изображению, где я пометил в красном поле место, где нижний колонтитул заканчивается на уровне масштабирования 200% веб-страницы

Как видно на картинке, контент является гибким на этом уровне масштабирования - разрывов нет.Но нижний колонтитул всегда будет расширяться только до такой степени, а остальное будет занято пробелами.

ОРИГИНАЛЬНЫЙ ВОПРОС:

Я разработал сайт и тестировал парухарактеристик с дизайном и заметил, что нижний колонтитул работает отлично от очень низкого уровня масштабирования (скажем, 10%) до почти 180% масштабирования.Но, за исключением, скажем, увеличения на 180%, нижний колонтитул сжимается и ведет себя так, как показано ниже -

(Предполагается, что нижний колонтитул представляет собой div с высотой, равной 100px, и высотой, равной 100px, шириной, равной 100%, и темно-синим цветом.цвет фона).

При увеличении 180% в браузере появляется горизонтальная полоса прокрутки.Правый конец нижнего колонтитула присутствует в точке, где необходимо сделать горизонтальную прокрутку, или, другими словами, он выглядит так, как будто 100% для области просмотра;только при перемещении горизонтальной полосы прокрутки мы увидим, что фактический нижний колонтитул заканчивается там, и a, что есть белый фон от правого конца нижнего колонтитула до фактического правого конца страницы при увеличении на 180%.

Я делаюне сталкивался с этой проблемой, хотя с заголовком.Он отлично работает на любом уровне масштабирования.Кажется, я не могу найти проблему с нижним колонтитулом, так как верхний и нижний колонтитулы почти одинаково выложены в css.

Любые мысли / подходы о том, как решить проблему масштабирования нижнего колонтитула, очень приветствуются.

Спасибо!(и я действительно очень надеюсь, что проблема достаточно ясна:)

Answer 1

Вот попытка ответа, но в вашем сообщении отсутствует несколько важных статей, которые могут вам помочь:

1. Ссылка? Или нужны фрагменты кода - используйте pastebin или что-то еще.
2. На какой браузер вы ссылаетесь?

Исходя из описания, звучит так, что сам ваш контент будет хорошо масштабироваться / увеличиваться до тех пор, пока не столкнется с жестким ограничением контента, таким как фиксированная ширина изображения или длинная строка (то есть URL). Также может быть указана минимальная ширина где-то в контенте.

В конце концов, это поведение может быть специфичным для конкретного браузера - пробовали ли вы в других браузерах? Они все ведут себя одинаково?

Answer 2

У меня была такая же проблема.Я перепробовал кучу разных решений.Тот, который работал для меня, был самым простым.Не знаю, какова ваша основная причина для исправления этой проблемы, но моя заключается в том, что большой сегмент нашего трафика (10%) используют старые мониторы с разрешением 1024x768.Таким образом, они посещали наш сайт и должны были прокрутить вправо, чтобы увидеть весь контент.Мой заголовок и нижний колонтитул ломались, когда они прокручивались вправо.Я применил это к тегу body, и он все исправил.

body {
min-width: 1024px;
max-width: auto;
}

Надеюсь, это сработает и для вас.

Answer 3

Что более забавно, я только что проверил, как нижний колонтитул этого сайта (stackoverflow.com) ведет себя при увеличении до 200%, и он ведет себя точно так же, как и мой. Так что я думаю, что существует множество других сайтов (еще один - Design Instruct - http://designinstruct.com/) с той же проблемой. Я предполагаю, что любой сайт, который показывает полный нижний колонтитул (слева направо 100%) в окне просмотра) определенно столкнется с этой проблемой при небольшом увеличении пользователем.

Всем, кто спрашивает, как это меня беспокоит, хорошо, если вы попытаетесь загрузить свой сайт на любом из смартфонов, а пользователь укротит его до уровня, равного 120%, вы увидите проблему с нижним колонтитулом. Для многих это может быть достаточно тривиально, чтобы обдумать ночь и оставить все как есть, но мне определенно хотелось бы посмотреть, есть ли решение.

Закрытие этого вопроса, хотя и не решено, поскольку я не вижу много конструктивных предложений. В любом случае, спасибо.