내용이 오버플로 된 고정 전체 화면 높이 컨테이너 외부

Question

오른쪽에서 슬라이드 아웃하는 모달이 있으며 브라우저 창의 전체 높이를 사용합니다. 그것은 머리말, 꼬리말 및 중간 내용을 가지고 있습니다. 중간 콘텐츠가 충분히 크면 스크롤 (넘침 : 자동)을 원합니다. 이것이 가능한가? 나는 그들이 (상단에 헤더 및 바닥 글 맨 아래에서, 또는 중 하나가 어디에 남아 머리글과 바닥 글을 원하는, 그래서 본질적으로

: 여기

내 모달의 스크린 샷입니다 내용의 맨 아래), 브라우저 창 크기를 아래쪽으로 끌어서 크기를 조정하면 브라우저 높이가 내용보다 짧아지면 중간 내용에 스크롤 막대가 표시되는 것을 볼 수 있습니다.

.modal-body { 
    overflow: auto; 
} 

아무 것도 보이지 않습니다.

여기 JS 바이올린의 : https://jsfiddle.net/707xbabw/2/

Answer 1

당신이 몸과 오버 플로우 자동차 모델 또는 스크롤 높이를 추가 할 필요가

demo link 

작품은에 overflow: auto를 가하고 무엇을

https://jsfiddle.net/kanib93/zfh6kzfw/

Answer 2

.modal-content. 그러나 닫기 버튼은 오버플로 된 컨텐트 외부에 있기 때문에 사라집니다. 이 문제를 해결하려면, 그것은 DIV 더 높은 넣고는에 가정으로 작동합니다 :

참조 : 나는 가정 auto` : https://jsfiddle.net/707xbabw/7/