HTML 및 CSS 질문 : 절대 위치에있는 두 요소 사이의 요소가 올바르게 크기 조정될 필요가 있습니다.

Question

#header 
{ 
    position: absolute; 
    top: 0%; 
    height: 24px; 
} 
#body 
{ 
    position: absolute; 
    top: 24px; 
    bottom: 20%; 
    overflow: auto; 
} 
#footer 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 17.2%; 
    min-height: 80px; 
    overflow: auto; 
} 

제가 브라우저 창을 압축하면 중간 요소 ('본문')가 바닥 글 영역으로 들어가기 시작합니다. 아래쪽에서 20 %가 바닥 글의 최소 높이보다 커지면). 바닥 글의 높이는 최소 높이보다 클 수 있지만 더 작을 수는 없습니다.

자바 스크립트 코드없이 이것을 수행하는 좋은 방법이 있습니까?

Answer 1

번호 절대적는 문서의 흐름에서 제거하고 다른 성분의 지식이 없다.

나는 변수 높이 바닥 글과 함께 작동 끈적-바닥 글 솔루션을 보지 못했다.

Answer 2

어떤 headers의 예와 동적 드라이브에 footers있다. 이것들은 순수한 CSS 레이아웃 예제입니다.

이 두 가지 조합으로 동일한 효과를 얻을 수 있어야합니다. 요소가 위치된다