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

Div 높이를 본문에서 고정 높이 머리글 및 바닥글을 뺀 100%로 설정

콘텐츠 div를 설정하려는 경우 고정 높이 머리글 및 바닥글 요소를 제외하고 본문 높이의 100%를 차지하려면 CSS를 사용하는 것이 이상적인 솔루션입니다. 다음은 여러 브라우저에서 작동하는 방탄 기술입니다.

<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;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

이 접근 방식의 핵심 요소를 분석해 보겠습니다.

• 절대 위치 지정: #wrapper div 절대적으로 배치되어 뷰포트의 전체 높이까지 늘어날 수 있습니다.
• 음수 여백: 머리글 및 바닥글 요소는 음수 여백을 사용하여 #wrapper를 겹칩니다. 이는 #content div에 필요한 공간을 제공하면서 고정된 듯한 착각을 불러일으킵니다.
• 최소 높이: #wrapper 및 #content div 모두 최소 높이가 100%로 설정되어 있습니다. 이렇게 하면 머리글과 바닥글이 차지하지 않는 나머지 공간을 채울 수 있습니다.

이 기술은 콘텐츠 div를 본문 높이의 100%에서 고정 높이를 뺀 값으로 안정적으로 설정하는 크로스 브라우저 솔루션을 제공합니다. 높이 머리글 및 바닥글 요소.

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