고정 헤더와 고정 사이드 네비게이션 및 스크롤하는 콘텐츠가있는 사이트가 있습니다.CSS - 고정 사이드 네비게이션이 완전히 보이지 않을 경우 스크롤/이동해야합니다.
일부 페이지에서는 작은 화면을 가진 사용자가 고정 된 측면 탐색이 화면 하단으로 확장되어 모든 메뉴 항목에 액세스 할 수 없음을 발견했습니다.
여기에 어떤 방법이 있습니까?
설명하기 위해 빠른 모형을 만들었습니다. 브라우저를 축소까지
http://jsfiddle.net/cr0wn3r/ycTXF/
그것은 모두 괜찮습니다, 다음은 leftcol 화면 하단 떨어져 간다보고로 스크롤 할 수있는 방법이 없습니다.
미디어 쿼리를 사용하면 뷰포트의 크기를 감지 한 다음 그에 따라 조건부로 사이드 바를 스타일 지정할 수 있습니다 (뷰포트의 높이가 너무 작 으면 모든 내용 뒤에 배치 할 수 있음).
This article 이단 마콧 (Eman Marcotte)은 this site이 어떻게 서로 다른 뷰포트를 처리 할 수 있는지 보여 주며 반응 형 사이트로 얻을 수있는 이점을 잘 설명합니다.
키는 미디어 쿼리를 사용하여 다른 뷰포트를 올바르게 처리하는 것입니다.
나는 (내가 당신의 바이올린에 이런 짓을 한) 당신의 CCS으로
overflow: scroll;
을 추가 솔루션을 생각할 수있다. 추악한데 그렇지 않으면 방문객이 새 스크린을 구입해야합니다. 아니면 글꼴 크기를 조정할 수 있습니까?
흠 여기 CSS 미디어 쿼리를 설명 크리스 Coyier의 뛰어난 기사가있다. 잘 못생긴 생활을 할 수는 있지만 오버 플로우를 추가 할 때 div가 화면 아래쪽에 매달려 있다는 것을 알고있는 것처럼 스크롤하지 않습니다. 따라서 숨겨진 콘텐츠는 숨겨져 있습니다. 어쩌면 내가 nav div의 높이를 고정시킨다면 효과가 있을지 모르겠지만, 그렇게하기를 원하는지 확신 할 수 없다. 단지 몇 명의 사용자를 수용하기 위해 작은 크기를 설정해야하고, 큰 화면을 가진 사용자 메뉴를 스크롤해야합니다. – petesiss
화면이 작은 사용자의 고정 경로 스타일을 변경하려면 미디어 쿼리를 사용해야합니다. 더 작은 폰트 크기, 패딩, 뭐든간에.
팁을 주셔서 감사합니다. 나는 좋은 읽을 거리가있을거야. Im이 뭔가를 놓치지 않는 한 IE7의 문제를 해결할 수는 없지만 여전히 지원해야합니다. – petesiss
팁을 주셔서 감사합니다. 나는 좋은 읽을 거리가있을거야. Im이 뭔가를 놓치지 않는 한 IE7의 문제를 해결할 수는 없지만 여전히 지원해야합니다. – petesiss
레거시 IE의 미디어 쿼리에 항상 respond.js를 사용할 수 있습니다. [https://github.com/scottjehl/Respond](https://github.com/scottjehl/Respond) – Larry
굉장합니다. 포인터 주셔서 감사. – petesiss