안녕하세요. 내 콘텐츠 만 스크롤되며 내 바닥 글 및 머리글 위치는 고정되는 모바일 웹 페이지를 작성 중입니다. - 내용이 스크롤되지 않도록 만들 수 있습니까? 머리글 또는 바닥 글, 그래서 그것은 단지 그것에 자신의 div를 스크롤합니다.고정 된 머리글/바닥 글이있는 모바일 페이지의 내용 스크롤
내가 이것을하고 싶은 이유는 내 머리글과 바닥 글에 약간의 불투명도가있을 것이며 내용이 아래로 스크롤되면 좋은 모양이 아닌 것입니다.
가 난 그냥 제거 :
는 Heres는 내가 만든 jsfiddle 당신에게
여기당신이 스크롤의 예를 보여 불과합니다 스크롤 부분에 position: absolute (래퍼 및 스크롤 콘텐츠), 첫 번째 항목과 마지막 항목이 머리글과 바닥 글 아래에 있지 않도록하기 위해 래퍼에 일부 padding을 추가했습니다.
기본적으로, 트릭은 특정 고정 높이 요소에 overflow: auto를 사용하지 않고, 정상적인 페이지로 스크롤 position: fixed에만 머리글과 바닥 글에 및하자 페이지의 나머지 부분을 사용하여 수행됩니다. 이렇게하면 유일한 문제는 콘텐츠의 첫 번째 줄이 항상 고정 위치 헤더 (및 바닥 글 밑의 마지막 줄) 아래에있게되지만 콘텐츠 래퍼에 몇 가지 패딩을 적용하여이 문제를 해결할 수 있습니다. 머리글 (및 바닥 글) 높이. 알 겠어?
감사합니다.하지만 내용은 여전히 제목과 바닥 글 아래에옵니다. 어쩌면 문제를 설명하기에 다소 모호한 것일 수 있습니다. 머리글과 바닥 글에 불투명도를 추가했습니다. 난 그냥 머리글이나 바닥 글 아래에서 스크롤 할 수있는 내용을 원하지 않습니다. 가능합니까? http://jsfiddle.net/VNVqs/4/ – Fruxelot
예를 들어 답을 업데이트했습니다. Fiddle 's rev.를 참조하십시오. 삼*. –
예 - 첫 번째 항목과 마지막 항목은 괜찮습니다.하지만 스크롤 할 때 항목이 헤더 뒤쪽에 표시됩니다. 그것은 나의 문제 haha 다! 머리글과 바닥 글의 불투명도가 변경되어 페이지가 스크롤되면 항목 뒤에 요소가 표시된다는 것을 보여줍니다. – Fruxelot
절대 위치를 모두 제거하고 오버플로 자동으로 스크롤 콘텐츠 나 래퍼에 고정 높이를 지정해야합니다. 그리고 머리글과 바닥 글에서 고정 된 위치를 제거하십시오. 이것을 확인하십시오 : http://jsfiddle.net/VNVqs/ – SVS