나머지 브라우저 창 및 중심 내용을 채우기 위해 div를 확장하십시오.

Question

제가 작업하고있는 웹 사이트의 특정 레이아웃을 얻으려고하고 있지만 어떻게해야할지 모르겠습니다. 레이아웃은 다음과 같이 표시됩니다

헤더는 그것에 대해 특별한 것은 없다. 바닥 글은 position: fixed 및 bottom: 0px입니다. 본체의 내용은 머리말의 맨 아래에서 바닥 글의 맨 아래까지의 공간에서 세로로 가운데에 있어야합니다. 창 높이를 조정하면 본문 내용이이 두 점의 중앙에 유지되어야합니다. 또한 웹 사이트는 반응 형이지만 960px에서 최대 1600px까지만 가능합니다 (따라서 최대 너비는 960px입니다).

이것을 달성하는 방법에 대한 유일한 아이디어는 본문 내용을 포함하는 div를 자동으로 확장하여 헤더 하단에서부터 브라우저 창의 아래쪽까지 전체 높이가되도록 설정 한 다음 몇 가지 패딩 바닥 글을 설명하기 위해 하단에 있음) div를 포함하는 div에 display: table을 사용하고 하위 div에는 display: table-cell 및 vertical-align: middle을 사용합니다.

잠재적으로이 작업을 수행 할 수있는 다른 방법이 있습니까? 그렇지 않은 경우 본문 내용의 포함 div를 헤더 하단에서 브라우저 창의 아래쪽까지 전체 높이로 확장하려면 어떻게해야합니까?

Answer 1

고정 된 높이의 헤더에 대한 한 가지 해결책이 있습니다.

<div class="header">Header</div> 
<div class="main-wrap"> 
    <div class="container"> 
     <div class="content">Content...</div> 
    </div> 
</div> 
<div class="footer">Footer</div> 

와 CSS :

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
.header { 
    height: 50px; 
    background-color: beige; 
} 
.main-wrap { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    width: 100%; 
    background-color: silver; 
    overflow: auto; 
} 
.container { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.content { 
    border: 1px solid blue; 
    display: table-cell; 
    height: 100%; 
    width: 100%; 
    vertical-align: middle; 
} 
.footer { 
    height: 50px; 
    width: 100%; 
    background-color: lightblue; 
    position: fixed; 
    bottom: 0; 
} 

참조 데모에서 :

귀하의 HTML은 다음과 같은 패턴을 가질 필요가 http://jsfiddle.net/audetwebdesign/aGTKs/

이의 헤더에이를 적용 할 수 있습니다 가변 높이.

.main-wrap 컨테이너는 머리말과 꼬리말 사이의 공간을 정의합니다.

.container 블록은 display: table을 사용하고 높이는 .main-wrap에서 상속됩니다.

마지막으로 .content은 vertical-align: middle (기본값)을 사용하여 콘텐츠의 세로 가운데 맞춤을 허용하는 display: table-cell을 사용합니다.

보기 포트의 높이를 캡처하려면 body 및 html 높이를 100 %로 설정해야합니다.