#css #xhtml #zooming #footer
#css — код #xhtml #масштабирование #нижний колонтитул
Вопрос:
ОБНОВЛЕНО С ПОМОЩЬЮ ТРАФАРЕТНОЙ ПЕЧАТИ ПРОБЛЕМЫ: Пожалуйста, обратитесь к прикрепленному изображению, где я отметил в красном поле место, где нижний колонтитул заканчивается при 200%-ном уровне масштабирования веб-страницы
Как видно на рисунке, содержимое является гибким при этом уровне масштабирования — никаких нарушений нет. Но нижний колонтитул всегда будет расширяться только настолько, а оставшаяся часть будет занята пробелами.
ОРИГИНАЛЬНЫЙ ВОПРОС:
Я разработал сайт, тестировал пару характеристик дизайна и заметил, что нижний колонтитул отлично работает от очень низкого уровня масштабирования (скажем, 10%) до почти 180%. Но за пределами, скажем, увеличения на 180% нижний колонтитул сжимается и ведет себя, как показано ниже —
(Предположим, что нижний колонтитул представляет собой div с высотой 100 пикселей и высотой 100 пикселей, шириной 100% и фоном темно-синего цвета).
При увеличении на 180% в браузере появляется горизонтальная полоса прокрутки. Правый конец нижнего колонтитула находится в точке, где необходимо выполнить горизонтальную прокрутку, или, другими словами, он выглядит так, как будто на 100% соответствует видовому экрану; только при перемещении горизонтальной полосы прокрутки мы увидим, что нижний колонтитул фактически заканчивается там и что есть белый фон с правый конец нижнего колонтитула до фактического правого конца страницы при увеличении на 180%.
Однако я не сталкиваюсь с этой проблемой с заголовком. Он отлично работает на любых уровнях масштабирования (увеличения / уменьшения). Кажется, я не могу найти проблему с нижним колонтитулом, так как верхний и нижний колонтитулы почти одинаково расположены в css.
Любые мысли / подходы о том, как решить проблему масштабирования нижнего колонтитула, очень ценятся.
Спасибо! (и я действительно очень надеюсь, что проблема достаточно ясна 🙂
Комментарии:
1. Одна картинка сделала бы все намного проще для понимания.
2. Я никогда не могу понять, почему людей так волнует, как выглядят сайты, увеличенные до гигантских размеров.
3. В @ZippyV только 221 слово, не считая заголовка. Изображение определенно поможет, так как оно стоит 1000.
4. 🙂 Включили картинку!
Ответ №1:
Вот попытка ответа, но в вашем сообщении отсутствует несколько важных элементов, которые помогут вам:
- Ссылка? Или нужны фрагменты кода — используйте pastebin или что-то в этом роде.
- О каком браузере вы говорите?
Судя по описанию, похоже, что сам ваш контент будет масштабироваться / масштабироваться до тех пор, пока не столкнется с жестким ограничением содержимого, таким как фиксированная ширина изображения или длинная строка (например, URL). Где-то в содержимом также может быть указана минимальная ширина.
В конце концов, такое поведение может быть специфичным для конкретного браузера — вы пробовали в других браузерах? Все ли они ведут себя одинаково?
Комментарии:
1. Я включил экранную печать, чтобы обеспечить лучшую четкость. Однако код не может быть опубликован: (Он ведет себя таким образом во всех популярных браузерах (IE / ff …). Я нигде не вижу минимальной ширины. Нижний колонтитул почему-то отказывается расширяться при появлении горизонтальной полосы прокрутки, но все остальные элементы на странице достаточно гибкие, чтобы расширяться / сжиматься в зависимости от обстоятельств.
2. Основываясь на прикрепленном изображении, я бы предположил, что нижний колонтитул имеет фоновое изображение фиксированной ширины и не повторяется?
3. фоновое изображение представляет собой плитку и имеет значение repeat-x.
Ответ №2:
С другой стороны, я только что проверил, как этот сайт (stackoverflow.com ) нижний колонтитул ведет себя при увеличении масштаба до 200%, и он ведет себя точно так же, как и мой. Так что, я думаю, есть чертовски много других сайтов (еще один — Design Instruct — http://designinstruct.com /) с той же заботой. Я думаю, что любой сайт, который показывает нижний колонтитул во всю длину (слева направо 100% в окне просмотра), определенно столкнулся бы с этой проблемой при небольшом увеличении пользователем.
Всем, кто спрашивает, как это меня беспокоит, хорошо, если вы попытаетесь загрузить свой сайт на любом из смартфонов, а пользователь увеличит его до уровня 120%, вы увидите проблему с нижним колонтитулом. Для многих это может быть достаточно тривиально, чтобы обдумать ночь и оставить все как есть, но для меня я определенно хотел бы посмотреть, есть ли решение.
Закрываю этот вопрос, хотя и нерешенный, поскольку я не вижу много конструктивных предложений. В любом случае спасибо.
Ответ №3:
Я столкнулся с той же проблемой. Я перепробовал кучу разных решений. Тот, который сработал для меня, был самым простым. Не уверен, какова ваша основная причина для исправления этой проблемы, но моя заключается в том, что большая часть нашего трафика (10%) использует старые мониторы с разрешением 1024×768. Таким образом, они посещали наш сайт, и им нужно было прокрутить страницу вправо, чтобы увидеть полный контент. Мой верхний и нижний колонтитулы ломались, когда они прокручивались вправо. Я применил это к тегу body, и он все исправил.
body {
min-width: 1024px;
max-width: auto;
}
Надеюсь, у вас это тоже получится.