CSS - фиксированная боковая навигация должна прокручиваться / перемещаться, если она не полностью видна

У меня есть сайт с фиксированным заголовком и фиксированной боковой навигацией, а также прокручиваемый контент.

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

Есть ли способ обойти это?

Я сделал быстрый макет для иллюстрации.

http://jsfiddle.net/cr0wn3r/ycTXF/

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


css css-position overflow
person petesiss    schedule 11.11.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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

Ключевым моментом является использование медиа-запросов для правильной обработки различных окон просмотра.

person Larry    schedule 11.11.2011
comment
Спасибо за подсказку. Я буду хорошо читать. Если я что-то не упустил, хотя это не решит проблему для IE7, и мне все еще нужно это поддерживать. - person petesiss; 11.11.2011
comment
Вы всегда можете использовать response.js для устаревшей поддержки IE медиазапросов: https://github.com/scottjehl/Respond - person Larry; 11.11.2011

arrow_upward
1
arrow_downward

Вероятно, вам следует использовать медиа-запросы, чтобы изменить стиль вашей фиксированной навигации для пользователей с меньшими экранами. Меньший размер шрифта, отступы, что угодно.

Здесь есть отличная статья Криса Койера, объясняющая CSS Media Queries http://css-tricks.com/6731-css-media-queries/

person Leo    schedule 11.11.2011
comment
Спасибо за подсказку. Я буду хорошо читать. Если я что-то не упустил, хотя это не решит проблему для IE7, и мне все еще нужно это поддерживать. - person petesiss; 11.11.2011

arrow_upward
0
arrow_downward

Я мог подумать о решении добавить

    overflow: scroll;

К вашему CCS (я сделал это на вашей скрипке). Это некрасиво, но иначе вашим посетителям придется покупать новые экраны... Или, может быть, вы можете просто настроить размер шрифта?!

person PatrickP    schedule 11.11.2011
comment
хм. Ну, я мог бы жить с уродливым, но когда я добавляю overflow:scroll, он не работает, поскольку div, похоже, не знает, что он свисает с нижней части экрана. Таким образом, скрытый контент просто остается скрытым. Возможно, это сработало бы, если бы я зафиксировал высоту навигационного блока, но я не уверен, что хочу это делать, так как тогда мне пришлось бы установить небольшой размер только для нескольких пользователей и даже для пользователей с большими экранами. пришлось бы прокручивать меню. - person petesiss; 11.11.2011