스크롤해도 하단에 div 스틱 만들기

Question

스크롤하는 경우에도 창 아래쪽에 붙일 바닥 글을 구현 중입니다. 꼬리말 위의 내용에 대한 스크롤 막대는 내용 자체 내에 있어야합니다 (바닥 글로 연장되지 않음).

이 방법이 있습니까? 감사. 바닥 글 요소

Answer 1

설정 CSS :

.footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

Answer 2

.footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

대부분 잘 작동! 하지만 끈적 거리기를 원하면 iScroll (http://iscrolljs.com)을 사용해야합니다. iScroll을 사용하면 스크롤 할 영역이 하나 뿐이며 머리글과 바닥 글은 스크롤 할 수 없습니다!

Answer 3

페이지를 그릴 수있는 뷰포트가 있고 그 밖에 그릴 수 없습니다. 스크롤 막대는 창 자체의 제어/장식이며 사용자가이를 감추지 못합니다.

당신이 창에 스크롤바가있는 것을 피하고 대신 메인 콘텐츠에 스크롤바가 있어야합니다.

바닥 글과 주 콘텐츠 위치를 모두 설정하고 주 콘텐츠를 overflow: scroll으로 스크롤 할 수있게합니다. 그러면 스크롤 막대가 브라우저 창 대신 콘텐츠 div에 연결됩니다.
바닥 글은 옆에 스크롤 막대가 없지만 오른쪽에는 예약 된 공간이있을 수 있습니다. 브라우저 공급 업체에 달려 있습니다.

그것은 (내가 수업 대신 ID를 사용하고 있습니다) 다음과 같이 표시됩니다

#content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 90%; 
 
    overflow: scroll; 
 
} 
 
#footer { 
 
    background: white; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 10%; 
 
}

<div id="content"> 
 
This is the content area. It will have lots of vertical space so that it can scroll.<br> 
 
<br> 
 
a<br><br> 
 
b<br><br> 
 
c<br><br> 
 
d<br><br> 
 
e<br><br> 
 
f<br><br> 
 
g<br><br> 
 
h<br><br> 
 
i<br><br> 
 
j<br><br> 
 
k<br><br> 
 
l<br><br> 
 
m<br><br> 
 
n<br><br> 
 
o<br><br> 
 
p<br><br> 
 
</div> 
 
<div id="footer"> 
 
This is the footer part and may have <em>the fine print</em> and/or navigation links; whatever you like. 
 
</div>

...하거나 시연 this fiddle를 참조하십시오.