컨테이너 div 안에 고정 머리글과 바닥 글이있는 스크롤 가능 본문을 만들려면 어떻게해야합니까? jQuery 사용하기

Question

하나의 컨테이너 안에 두 개의 자식 요소가 있습니다. 나는 한 어린이를 용기의 맨 위에 놓고 다른 어린이는 용기의 밑에 놓기를 원합니다. 중간 부분 (내용)은 상위 및 하위 하위 요소 사이를 스크롤해야합니다.

컨테이너 안의 두 하위 요소가 고정 된 위치에 있고 내용이 위쪽 및 아래쪽 div를 모두 스크롤하지 않고 스크롤해야합니다.

CSS 또는 jQuery를 사용하는 솔루션을 사용하고 싶습니다. JSFiddle 예를 보려면 아래 내 의견을 참조하십시오.

Answer 1

나는 아래에 코멘트를 추가하고 싶지만 낮은 평판 때문에 나는 그것을 할 수 없었다.

다음 jsfiddles 살펴 보자

1) http://jsfiddle.net/davidpauljunior/g2ydV/8/

2) http://jsfiddle.net/yASFU/

스타일 :

#content { 
    width: 80%; 
    margin: 0 auto; 
    padding: 60px 0; 
} 

Answer 2

그냥에서 필요한 요소 position:fixed; 추가를 CSS. 같은를 반영하기 위해 fiddle 업데이트

.inside { 
    top: 2px; 
    border: 1px solid #000; 
    background-color: #000; 
    color: #FFF; 
    height:50px; 
    position:fixed; 

    } 

    .inside2 { 
    bottom: 2px; 
    border: 1px solid #000; 
    background-color: #000; 
    color: #FFF; 
    height:50px; 
    position:fixed; 
    } 

Further read : 그래서 CSS 같은 것을 보일 것입니다.

Answer 3

내용을 저장할 다른 내부 div를 추가하고 overflow-y: scroll을 설정하여 내용 만 스크롤하고 머리글과 바닥 글은 스크롤하지 않도록 할 수 있습니다.

http://jsfiddle.net/jwnace/vtuv6wh6/