머리글과 바닥글 뒤에 남은 본문 높이를 채우는 동적 콘텐츠 Div를 만드는 방법은 무엇입니까?

동적 콘텐츠 Div가 머리글과 바닥글 뒤에 남은 본문 높이를 채우도록 보장

고정 높이 머리글과 바닥글을 사용한 후 남은 본문 높이에 걸쳐 있는 콘텐츠 div 달성 일반적인 CSS 문제입니다. 다음의 포괄적인 솔루션은 최신 브라우저와 Internet Explorer 8에서 이 문제를 해결합니다.

이 예에서는 콘텐츠를 "#wrapper" div 내에 래핑하고 전체 뷰포트에 걸쳐 절대적인 위치를 지정합니다. "최소 높이" 속성을 100%로 설정하여 최소한 해당 높이를 차지하고 머리글과 바닥글을 고려하여 패딩을 추가합니다.

"#content" div 내에 콘텐츠를 중첩합니다. "최소 높이"는 100%로 나머지 높이를 차지합니다. 머리글과 바닥글에 고정 높이를 지정하고 "#wrapper" div의 패딩을 보상하기 위해 여백을 음수로 조정합니다.

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

이 솔루션은 뷰포트 크기에 따라 콘텐츠 div의 높이를 동적으로 조정합니다. 머리글과 바닥글을 수용하면서 본문의 나머지 공간을 매끄럽게 채웁니다.

위 내용은 머리글과 바닥글 뒤에 남은 본문 높이를 채우는 동적 콘텐츠 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!