CSS만 사용하여 Div를 페이지 높이 100%로 늘릴 수 있나요?-CSS 튜토리얼-php.cn

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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