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

Barbara Streisand
풀어 주다: 2024-10-30 23:48:29
원래의
747명이 탐색했습니다.

Can You Stretch a Div to 100% Page Height Using Only CSS?

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"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>
로그인 후 복사

이론

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!