CSS : 반응 형 왼쪽 메뉴, 오른쪽 열의 내용?

좁은 화면에서 왼쪽 사이드 바가 접히는 반응 형 레이아웃을 만들려고합니다. http://purecss.io/과 약간 비슷하지만 상단 머리글은 고정되어 있습니다.CSS : 반응 형 왼쪽 메뉴, 오른쪽 열의 내용?

내 일까지 (코드는 여기에 재현하는 정말 너무 깁니다) : http://jsbin.com/uhalic/3/edit

내가 (NB를 해결하기 위해 사투를 벌인거야 두 가지 문제는 당신이 450 픽셀을보다 HTML 섹션 넓은 확인해야합니다 있습니다) :

(1) 목록의 마지막 요소는 내가 이해할 수있는 이유없이 옆으로 옮겨져 있습니다.

enter image description here

(2) 바닥 글은 시각적으로 완전히 #main (빨간색 부분)에 포함되어야하며, 그 의미이고 실제로 그,하지만 텍스트가 #sidebar (파란색 부분)에 부분적으로 떨어지고있다. 내가 잘못 뭐하는 거지

enter image description here

2013-07-23 Richard

에 margin-left: 200px를 추가? 내 말은, 비록 스크롤해도 맨 위에 있어야한다는 말인가요?/편집 : 그런 식으로? http://jsbin.com/uhalic/5/ – Kamil

빨간색 열에 왼쪽에 <li> 개의 요소가 없기 때문에 빨간색 부분에 실제로는 4 <li> 개의 요소가 비뚤어지고 두 개는 보이지만 왼쪽에는 숨겨져 있습니다.

.results 클래스에 margin-left: 160px을 추가해야합니다. 그런 다음 .result에서 width: 100%을 제거하거나 그대로두면 100 %로 유지하십시오.

또한, 당신은 왼쪽 사이드 바는 끈적 할 #footer

2013-07-23 14:09:59 ediblecode

아! 매우 감사합니다. – Richard

답변