WeChat 애플릿에서 요소가 화면의 전체 높이를 차지하도록 만드는 방법

WeChat 애플릿에서 요소가 전체 화면 높이를 차지하도록 하는 방법

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

너비는 단순히 width:100%

그러나 높이는 부모 요소의 높이가 주어질 때 height:100%가 주어져야 한다는 것을 우리가 알고 있습니다.

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

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

WeChat에서 애플릿에서는 wx.getSystemInfo 인터페이스를 호출한 다음 setData를 통해

값을 할당해야 합니다. 그러나 분명히 js를 통해 수행되므로 확실히 효율적이지는 않습니다. CSS로 스타일을 직접 설정합니다.

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

웹 페이지에서 body,html{height:100%}를 설정합니다.

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

그런데 위챗 애플릿에는 DOM 객체가 없는데 디버깅 도구를 보면 DOM 트리에 있는 것을 볼 수 있습니다(어떻게 불러야 할지 모르겠으니 그냥 부르자. 즉) 루트 노드는 page 이므로 page{height:100%}

를 사용해 보겠습니다. 물론 가능합니다. 높이는 전체 애플릿 창을 채웁니다.

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

읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 미니 프로그램에서 요소가 화면 전체 높이를 차지하도록 만드는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!