지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > DIV 요소를 페이지 하단까지 확장하려면 어떻게 해야 합니까?

DIV 요소를 페이지 하단까지 확장하려면 어떻게 해야 합니까?

Barbara Streisand
풀어 주다： 2024-11-27 20:40:11
원래의
469명이 탐색했습니다.

How Do I Make a DIV Element Expand to the Bottom of the Page?

페이지 하단까지 DIV 확장 적용

웹 디자인에서는 DIV 블록을 페이지 하단까지 확장해야 하는 경우가 있습니다. 콘텐츠의 부재. DIV는 일반적으로 콘텐츠를 수용하기 위해 필요한 만큼만 확장되므로 이는 어려울 수 있습니다.

문제 개요

다음 마크업을 고려하세요.

<body>
  <div>
로그인 후 복사

목표는 id="content"인 DIV를 세로로 늘려서 페이지 하단에 도달하도록 하는 것입니다. content.

해결책

문제는 콘텐츠 DIV의 높이가 아니라 이를 둘러싼 컨테이너에 있습니다. 이 문제를 해결하려면 다음 CSS를 html 및 body 요소에 적용하세요.

html, body { height:100%; }
로그인 후 복사

이렇게 하면 브라우저가 페이지 높이를 100%로 렌더링하여 콘텐츠 DIV가 한도까지 완전히 확장될 수 있습니다.

추가 고려 사항

이 솔루션은 대부분의 문제를 해결합니다. 경우에 따라 브라우저마다 높이 계산이 약간 다르게 구현될 수 있다는 점에 유의하는 것이 중요합니다. 다음은 추가 정보를 제공하는 몇 가지 유용한 리소스입니다. 통찰력:

  • http://www.brunildo.org/test/html_body_0.html
  • http://www.brunildo.org /test/html_body_11b.html
  • http://www.brunildo.org/test/index.html

추가로, 포괄적인 브라우저 호환성 정보는 http://quirksmode.org/를 참조하세요.

위 내용은 DIV 요소를 페이지 하단까지 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn
이전 기사：선택한 jQuery 요소의 태그 이름을 쉽게 얻는 방법은 무엇입니까? 다음 기사：jQuery를 사용하여 메뉴 항목의 활성 상태를 관리하려면 어떻게 해야 합니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2480
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2622
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2219
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
2085
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
2190
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿