div 고정 스크롤로 스크롤 가능

Question

고정 헤더/navbar div로 설정 한 이전 색인을 기반으로 기본 페이지 설정을 만드는 방법을 알아 내려고합니다. 200px 높이라고 가정 해 보겠습니다. 페이지 내용이있는 아래의 두 번째 div는 스크롤 가능해야하며 나머지 세로 공간은 브라우저 창 안에 있어야합니다. 어떤 제안?

Answer 1

overflow: hidden;을 CSS 파트에 추가하면 div를 스크롤 할 수 없게됩니다. overflow: auto;은 스크롤 사업부를 만들어 다시

예 : https://jsfiddle.net/v596fvbu/

Answer 2

할 수 있습니다 중 하나 네비게이션 바에 고정하고 그 아래 몸 스크롤 보자

.navbar { 
    height: 3em; 
    width: 100%; 
    position: fixed; 
} 

http://codepen.io/helb/pen/EWjPqJ

또는 페이지를 제한 높이를 브라우저 창 크기로 변경하고 두 번째 div를 스크롤 가능하게 만듭니다.

,

.page { 
    overflow-y: scroll; 
    height: calc(100vh - 3em); /* browser viewport height minus the navbar height */ 
} 

http://codepen.io/helb/pen/NpqNxy

참고 스크롤 위치의 차이 : StackOverflow의에