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

CSS Div를 페이지 높이의 100%까지 늘리는 방법

웹 디자인의 세계에서는 요소가 전체 높이까지 늘어나는 것이 바람직한 경우가 많습니다. 스크롤을 통해 액세스할 수 있는 숨겨진 영역을 포함하여 페이지의 이는 사이드바, 머리글 및 바닥글을 만드는 데 특히 유용합니다.

JavaScript를 사용하지 않고 이 효과를 얻으려면 CSS 솔루션을 살펴보겠습니다.

CSS 솔루션

div를 페이지 높이의 100%로 늘리는 열쇠는 HTML과 본문 요소 간의 관계를 이해하는 데 있습니다. 코드는 다음과 같습니다.

<code class="css">html {
    min-height: 100%; /* Ensure HTML is at least as tall as the viewport */
    position: relative; /* Make HTML box layout reference for divs */
}

body {
    height: 100%; /* Force BODY to match HTML height */
}

#my-div {
    position: absolute; /* Take div out of document flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* Hide overflow for aesthetic purposes */
    z-index: -1; /* Remove this line for non-background uses */
}</code>

설명

• html: HTML 요소의 최소 높이를 설정하여 다음 위치에 있는지 확인합니다. 최소한 뷰포트만큼 높습니다. 위치: 상대; HTML 상자를 div의 참조로 만듭니다.
• body: body 요소가 HTML 요소의 높이와 일치하도록 강제합니다. 이렇게 하면 전체 페이지가 전체 높이로 늘어납니다.
• #my-div: position:absolute;를 사용하여 문서 흐름에서 div를 제거하고 위쪽, 아래쪽을 사용하여 절대 위치를 지정합니다. , 왼쪽 및 오른쪽 속성. 오버플로: 숨김; 오버플로가 div 밖으로 흘러나오는 것을 방지합니다.

이 접근 방식을 따르면 페이지의 전체 높이까지 확장되는 CSS div를 쉽게 생성하여 웹 디자인의 유연성을 높일 수 있습니다.

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