CSS3 : 가운데 DIV를 최대 높이로 설정하려면 어떻게해야합니까?

나는 나의 웹 페이지에 세 <div> 영역을 사용하려면 : 헤더, 내용 및 바닥 글.CSS3 : 가운데 DIV를 최대 높이로 설정하려면 어떻게해야합니까?

바닥 글<div>은 웹 페이지의 맨 아래에 붙어 있습니다.

헤더<div>은 페이지 상단에 붙어 있다고 가정합니다.

내용<div>은 페이지 중간의 전체 영역을 채우기로되어 있습니다. 나는 배경 이미지를 사용하고<div> 나는 내용에 대한

#footer { position: fixed; bottom: 0; }

을 추가 한 페이지를 아래로 머물 수있는 바닥 글를 들어

<body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body>

:

그래서이 기본 레이아웃입니다 , 정확히 div 요소의 크기로 조정 :

는 지금은 상관없이 나중에 내용<div>에 추가됩니다 어떤 내용, 어떤 자바 스크립트를 추가하지 않고 헤더 및 바닥 글 사이에 정확히 뷰포트의 나머지 높이가되도록 내용<div>을 원하지 않습니다.

CSS3에서 어떻게 할 수 있습니까?

출처

2013-04-14 AxD

크기가 footer 및 header 인 경우 calc()을 사용할 수 있습니다. 그래서 가정 모두이 작동합니다 함께 100px을 :

html, body { height: 100%; } 
#content { 
    height: calc(100% - 100px); 
}

오래된 브라우저가이 기능을 지원하지 않는,하지만,주의하십시오. 또한 필요한 접두사에 대해 compatibility table을보십시오.

Example Fiddle

출처

2013-04-14 13:06:54 Sirko

을 확인해! 그러나 블록의 높이를 명시 적으로 "적합"으로 설정하는 것은 아닙니다. (늦은 답장으로 죄송합니다.이 스레드에 대한 알림을 얻지 못하는 것 같습니다.) – AxD

@AxD 세 개의 상자 모두에 백분율 값을 사용하면 올바르게 작동합니다. 그러나 나는 머리말과 꼬리말이 고정 된 높이를 가질 것이라고 생각합니다. 내 지식에서이 해결책을 떠날뿐입니다. – Sirko

멋진데! 그러나 #content div에 테두리를 추가하면 아래쪽 경계가 끝나는 것처럼 보이지 않습니다.파이어 폭스에서 어떤 상자 크기 모델을 사용하든, 아래쪽 테두리는 결코 보이지 않습니다. 트릭을 어떻게해야하는지 생각 해본 적이 있습니까? – AxD

이 같은 것을 사용할 수 있습니다. 그것은 당신이 결의안의 범위에서 당신의 직위를 지킬 수있게 해줄 것입니다.

#header { 
    position: fixed; 
    height: 10%; 
} 

#content { 
    position: fixed; 
    height: 80%; 
    top: 10%; 
} 

#footer { 
    position: fixed; 
    bottom: 0px; 
    height: 10%; 
}

것은 here 흥미로운

출처

2013-04-14 13:11:36 kbariotis

도움을 주셔서 감사합니다. 따라서 실제로 다른 모든 높이 관련 블록의 크기가 계산 된 후에 높이를 "적합"하게 설정하는 속성 값이 없습니다. HTML 4에는이 기능을 제공하는 별표 속성 값이 있습니다. – AxD

방금 당신의 모범을 보았습니다. 그것과 관련된 유일한 문제는 너비 인 것 같습니다. #content div 주위에 테두리를 추가하면 텍스트를 우회합니다. 너비 설정 : 100 %는 오른쪽 테두리를 멀리 떨어진 곳에 설정합니다. 어떤 너비 값을 제안 하시겠습니까? – AxD

이것은 내가 필요로했던 것이다 :) 환호 – csomakk

CSS3 : 가운데 DIV를 최대 높이로 설정하려면 어떻게해야합니까?

답변

관련 문제