3 플렉스 CSS를 사용하는 팬 레이아웃 페이지 스크롤에서도 항상 맨 위에 머물러 있음

Question

내 웹 페이지에 3 칸 레이아웃을 사용하려고합니다. 헤더는 페이지 스크롤에서도 항상 맨 위에 머물러 있으며 고정 된 높이를 갖습니다.

바닥 글은 고정 된 높이로 유지되지만 페이지가 스크롤 될 때마다 포트의 하단을 볼 수 있도록 고정되지 않습니다. 즉, 중심 영역의 내용이 높이를 초과하면 바닥 글이 아래로 이동하여 볼 수 없습니다. 포트 하단.

중간 콘텐츠 영역은 창 크기 조정시 자동으로 조정되므로 남아있는 모든 나머지 공간을 완전히 차지합니다.

이 방법이 플렉스 CSS로 작성되었거나 다른 접근법이 좋으면 좋게하는 것이 좋습니다. 나는 flex를 사용하여 직접 해봤지만 센터 영역의 내용이 높이가 변하면 창 크기가 변하면 전체 레이아웃이 이상하게 작동합니다. 대략적인 아이디어는 첨부 된 그림을 참조하십시오.

이 질문에 답하십시오. 작동하는 피들을 제공하십시오.

Answer 1

헤더 = 알려진 높이 끈적
내용 = 변수 높이
바닥 글 = 알려진 높이 (콘텐츠 내용에 충실보다 커질 경우)과 하단에

CSS calc

html, body{ height:100%; margin:0;} 
 

 
header{ 
 
    position: fixed; 
 
    z-index:10; 
 
    top:0; 
 
    height:50px; 
 
    width:100%; 
 
    background: hsl(0, 80%, 70%); 
 
} 
 

 
main{ 
 
    position:relative; 
 
    padding-top: 50px; /* header height */ 
 
    min-height: calc(100vh - 80px); /* 100vh - header - footer */ 
 
    background: hsl(150, 80%, 70%); 
 
} 
 

 
footer{ 
 
    position:relative; 
 
    height:30px; 
 
    background: hsl(200, 80%, 70%); 
 
}

<header>This is header 50px</header> 
 
<main>Main content calc px (addd long content and footer will follow)</main> 
 
<footer>Footer 30px</footer>