JavaScript 없이 CSS Div를 페이지 높이 100%로 늘리는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

JavaScript 없이 CSS Div를 페이지 높이 100%로 늘리는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-31 06:32:30

원래의

160명이 탐색했습니다.

How to Stretch a CSS Div to 100% Page Height Without JavaScript?

JavaScript 없이 CSS Div를 100% 페이지 높이로 확장

웹사이트의 사용자 경험을 향상하려면 페이지 요소가 예상대로 작동하는지 확인해야 합니다. . 일반적인 요구 사항 중 하나는 뷰포트 크기나 스크롤에 관계없이 전체 페이지 높이를 채우기 위해 탐색 모음이나 기타 요소를 세로로 늘려야 한다는 것입니다. JavaScript가 이를 달성할 수 있지만 순수 HTML/CSS 솔루션은 유연성 및 구현 용이성과 같은 이점을 제공합니다.

해결책:

다양한 접근 방식을 실험한 후 다음을 수행합니다. CSS와 HTML 구조는 DIV를 페이지 높이를 100%로 늘리기 위한 최적의 솔루션으로 나타났습니다:

<code class="css">/* Ensure the HTML element stretches to the full page height */
html {
    min-height: 100%;
    position: relative;
}

/* Force the body element to match the HTML element's height */
body {
    height: 100%;
}

/* Position the DIV container absolutely and stretch it to all sides */
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Only applies to background elements */
}</code>

로그인 후 복사

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

로그인 후 복사

설명:

html 요소가 만들어졌습니다. 측정을 위한 참조이며 상대적으로 배치되어 해당 하위 요소가 레이아웃에서 제거되는 것을 방지합니다. body 요소의 높이는 100%로 설정되어 html 요소의 높이와 일치합니다.

#cloud-container DIV의 절대 위치 지정은 위쪽/아래쪽/왼쪽/오른쪽이 0으로 설정된 것과 결합되어 사용 가능한 전체 공간을 차지합니다. Overflow: 숨겨진 속성은 콘텐츠가 컨테이너에서 오버플로되는 것을 방지합니다.

이유:

#cloud-container DIV를 html 요소의 하위로 배치하고 다음을 사용합니다. position: html 요소의 상대 속성을 사용하면 콘텐츠가 뷰포트보다 긴 경우에도 페이지의 전체 높이를 차지하도록 보장됩니다. 이 접근 방식은 강력하며 다양한 브라우저에서 널리 호환됩니다.

위 내용은 JavaScript 없이 CSS Div를 페이지 높이 100%로 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!