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

Имам сайт с фиксирана заглавка и фиксирана странична навигация и превъртащо се съдържание.

Открих, че на някои страници потребителите с по-малки екрани нямат достъп до всички елементи от менюто, тъй като фиксираната странична навигация се простира от долната част на екрана им.

Има ли начин да се заобиколи това?

Направих бърз макет, за да илюстрирам.

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

Всичко е наред, докато не свиете браузъра си и след това видите, че лявата колона изчезва от долната част на екрана и няма начин да превъртите до нея.


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

Отговори (3)


arrow_upward
1
arrow_downward

Използвайки медийни заявки, можете да откриете размера на прозореца за изглед и след това условно да стилизирате страничната си лента по съответния начин (може би да го поставите след цялото съдържание, ако височината на прозореца за изглед е твърде малка).

Тази статия от Ethan Marcotte обяснява добре какво можете да постигнете с отзивчиви сайтове, докато този сайт демонстрира как могат да се управляват различни прозорци.

Ключът е да използвате медийни заявки, за да обработвате правилно различни прозорци.

person Larry    schedule 11.11.2011
comment
Благодаря за съвета за това. Ще имам добро четене. Освен ако не пропускам нещо, но това няма да реши проблема за IE7 и все още трябва да поддържам това. - person petesiss; 11.11.2011
comment
Винаги можете да използвате respond.js за наследена поддръжка на IE за медийни заявки: https://github.com/scottjehl/Respond - person Larry; 11.11.2011

arrow_upward
1
arrow_downward

@unkulunkulu, хм, благодаря за пояснението. Видях вашия примерен код, но за съжаление вие ​​сте го изтрили. Мога ли да разбера каква е причината за любопитството ми
person Leo    schedule 11.11.2011
comment
Благодаря за съвета за това. Ще имам добро четене. Освен ако не пропускам нещо, но това няма да реши проблема за IE7 и все още трябва да поддържам това. - person petesiss; 11.11.2011

arrow_upward
0
arrow_downward

@axis, да, почти забравих да увелича i.. Благодаря
person PatrickP    schedule 11.11.2011
comment
Хммм. Е, бих могъл да живея с ugly, но когато добавя overflow:scroll, това не работи, тъй като div изглежда не е наясно, че виси от долната част на екрана. Така скритото съдържание просто остава скрито. Може би ще работи, ако фиксирам височината на навигационния div, но не съм сигурен, че искам да го направя, тъй като тогава ще трябва да задам малък размер, само за да се погрижа за няколко потребители и дори за потребители с големи екрани ще трябва да превъртите менюто. - person petesiss; 11.11.2011