WeChat 개발에서 요소가 전체 화면을 차지하도록 만드는 방법 소개

이 글에서는 WeChat 애플릿에서 요소가 화면 전체 높이를 차지하도록 하는 방법에 대한 관련 정보를 주로 소개합니다. 필요한 친구는

요소가 전체 높이를 차지하도록 하기를 참조하세요. WeChat 애플릿 화면 높이 구현 방법

프로젝트에서 컨테이너 요소는 화면의 높이와 너비를 채우는 데 자주 사용되며 다른 요소는 이 컨테이너 요소에 배치됩니다.

너비는 단순히 너비:100%

하지만 높이는 어떻습니까? 우리가 아는 것은 높이 :100%는 상위 요소의 높이가 지정될 때 사용해야 합니다.

이전 접근 방식은

js를 사용하여 화면 높이를 가져온 다음 이를 높이에 할당하는 것이었습니다.

웹 페이지의 화면 높이는 :window.innerHeight ;

WeChat 애플릿에서는 wx.getSystemInfo

interface를 호출한 다음 setData하지만 분명히 js를 통해서는 CSS가 직접 스타일을 부여하는 것만큼 효율적이지 않습니다.

그래서 다른 방법을 사용합니다:

웹 페이지에 body,html{height:100%} 설정;

body 및 html 설정 컨테이너 요소가 화면의 전체 높이를 차지하도록 하위 요소에서 height:100%를 사용할 수 있도록 100%로 설정합니다.

그런데 위챗 애플릿에는

dom 객체

가 없는데,

디버깅 도구를 보면 dom 트리를 볼 수 있습니다. 어떻게 부르는지 알아두세요), 그렇게 부르자), 루트 노드는 페이지이므로 페이지{높이:100%}를 사용해 보겠습니다. 물론 가능합니다. 높이는 전체 애플릿 창을 채웁니다.

그래서 저는 즐겁게 작은 프로그램을 계속해서 작성할 수 있습니다.

[관련 추천]

1.

위챗 공개계정 플랫폼 소스코드 다운로드

2. 알리지 주문 시스템 소스코드 다운로드

위 내용은 WeChat 개발에서 요소가 전체 화면을 차지하도록 만드는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!