고정 높이 머리글 및 바닥글을 제외하고 Div를 100% 본문 높이로 설정하는 방법은 무엇입니까?

고정 높이 머리글과 바닥글을 제외하고 Div를 본문 높이 100%로 설정

CSS를 사용하면 웹페이지 레이아웃을 우아하게 제어할 수 있습니다. 일반적인 요구 사항 중 하나는 고정 높이 머리글과 바닥글이 차지하는 공간을 제외하고 본문 높이의 100%로 콘텐츠를 표시하는 것입니다. 이 효과를 얻으려면 브라우저 간 호환성을 보장하기 위한 세심한 CSS 구현이 필요합니다.

한 가지 방탄 솔루션은 html과 본문을 최소 높이: 100%;로 설정하여 페이지가 최대한 확장되도록 하는 것입니다. 그런 다음 머리글 및 바닥글 높이를 수용할 수 있도록 절대 위치 지정 및 패딩을 사용하여 래퍼 div를 만들어야 합니다. 이 래퍼 내에서 #content div를 min-height: 100%;로 설정하여 남은 공간을 채울 수 있습니다.

머리글과 바닥글을 고정된 상태로 유지하려면 margin-top: -50px; 여백 하단: -50px; 적용되어 래퍼에 추가된 패딩을 효과적으로 무효화합니다. 이러한 음수 여백 값은 머리글과 바닥글을 래퍼 div 외부로 밀어내어 내용 위와 아래에 정지된 것처럼 보이게 합니다.

이 기술은 테스트를 거쳐 최신 브라우저와 심지어 Internet Explorer 8에서도 작동하는 것으로 입증되었습니다. Modernizr을 사용합니다(또는 Modernizr을 사용할 수 없는 경우 간단히 머리글 및 바닥글 요소를 div로 대체). 추가 설명을 위해 실제 예제가 포함된 코드 조각이 제공됩니다.

위 내용은 고정 높이 머리글 및 바닥글을 제외하고 Div를 100% 본문 높이로 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!