Div 요소가 항상 전체 화면 높이를 채우도록 하려면 어떻게 해야 합니까?

전체 화면

내용에 관계없이

내용에 관계없이 전체 화면의 수직 높이를 차지하는 요소는 일반적인 웹 개발 과제입니다. 이것이 가능합니까?

솔루션

다음 CSS 접근 방식은 이 효과를 지속적으로 달성합니다.

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  min-height: 100%;
}

이 솔루션의 작동 원리는 다음과 같습니다.

• 브라우저를 제거하기 위해 html 및 body 요소의 높이 및 여백 속성을 0으로 설정 여백.
• #wrapper 요소의 최소 높이를 100%로 설정하여 사용 가능한 모든 수직 공간을 차지하도록 합니다.

추가 참고사항

• 이전 버전의 Internet Explorer(IE6 이하)에서는 강제 실행을 위해 추가 CSS 규칙이 필요합니다. #wrapper는 전체 화면 높이를 차지합니다.
• 높이 대신 최소 높이를 사용하면 필요한 경우 추가 콘텐츠를 화면 높이 이상으로 확장할 수 있습니다.

위 내용은 Div 요소가 항상 전체 화면 높이를 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!