CSS만 사용하여 Div를 페이지 높이 100%로 늘릴 수 있나요?

CSS에서 Div를 100% 페이지 높이로 늘이기

웹페이지의 미적 측면과 기능을 향상하려면 웹페이지의 특정 부분을 차지하도록 요소를 정확하게 정렬해야 하는 경우가 많습니다. 페이지. 일반적인 요구 사항 중 하나는 탐색 메뉴나 사이드바를 뷰포트의 전체 높이에 걸쳐 확장하여 스크롤할 때 보이는 영역을 넘어 확장하는 것입니다.

Javascript 없이도 가능합니까?

이러한 기능이 HTML과 CSS를 통해서만 구현될 수 있는지에 대한 의문이 개발자들 사이에서 제기되었습니다. 대답은 '그렇다'입니다.

해결책

이 문제를 해결하려면 다음 CSS 수정을 고려하세요.

• z- 제거 div를 늘릴 수 있도록 인덱스를 만듭니다.
• 전체 높이 열의 경우 왼쪽이나 오른쪽을 생략합니다.
• 전체 너비 행의 경우 위쪽이나 아래쪽을 제외합니다.

다음은 솔루션을 보여주는 CSS 코드 예입니다.

<code class="css">html {
    min-height: 100%; /* ensures minimum viewport height */
    position: relative;
}
body {
    height: 100%; /* matches the height of the HTML element */
}
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}</code>

동반된 HTML 코드:

<code class="html">


    <div id="cloud-container"></div>

</code>

이론

The html {최소 높이: 100%; position:relative;} 선언을 통해 클라우드 컨테이너 div가 HTML 레이아웃 내에 유지되므로 정확한 높이 계산이 가능합니다.

위 내용은 CSS만 사용하여 Div를 페이지 높이 100%로 늘릴 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!