> 웹 프론트엔드 > CSS 튜토리얼 > div를 전체 화면에 채우는 방법(CSS)

div를 전체 화면에 채우는 방법(CSS)

不言
풀어 주다: 2018-05-09 11:41:08
원래의
4836명이 탐색했습니다.

이 글에서는 div를 전체 화면에 채우는 방법(css)을 주로 소개합니다. 특정 참조 값이 있으므로 필요한 친구가 참조할 수 있습니다.

본문에 p가 하나만 있는 경우 이렇게 하면 p가 전체 화면을 채웁니다.

1 p의 위치를 ​​설정합니다.

  Review -

CSS에는 다섯 가지 위치 속성이 있습니다.

정적: 기본값, 위치 지정 없음

절대: 절대 위치, 상위 요소를 기준으로 위치 지정

친척: 상대 위치 지정

고정: 고정 위치, 브라우저 창을 기준으로 위치 지정

상속: 상위 요소에서 위치 정보 상속

기본값 ​​​​정적 및 상속 외에도 추가할 수 있습니다. 나머지 3개는 창 적응을 구현합니다.

코드는 다음과 같습니다.

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         div{ 
 7             width:100%; 
 8             height: 100%; 
 9             background: yellow;
 10             position: absolute;
 11         }
 12 
 13 </style>
 14 
 15 
 16 <body>
 17 
 18 <div></div>
 19 
 20 </body>
로그인 후 복사

2. html과 본문의 너비와 높이를 설정하여 p가 화면을 채우도록 합니다.

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         html,body{ 
 7             width: 100%; 
 8             height: 100%; 
 9         }
 10         div{
 11             width:100%;
 12             height: 100%;
 13             background: yellow;
 14         }
 15 </style>
 16 
 17 <body>
 18 <div></div>
 19 </body>
로그인 후 복사

위는 이 기사의 전체 내용입니다. PHP 중국어 웹사이트로 이동합니다.


위 내용은 div를 전체 화면에 채우는 방법(CSS)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿