WeChat アプレットで要素が画面の高さ全体を占めるようにする方法

WeChat アプレットで要素が画面の高さ全体を占めるようにする方法

プロジェクトでは、多くの場合、コンテナ要素を使用して画面の高さと幅を占め、このコンテナ要素に他の要素を配置することが必要になります。

幅は単純に width:100% です

しかし、高さに関しては、親要素の高さを指定するときに height:100% を指定する必要があることがわかっています。

私の以前のアプローチは、js を使用して画面の高さを取得し、それを高さに割り当てることでした。

Web ページの画面の高さは次のとおりです。

WeChat アプレットでは、次のように呼び出す必要があります。 wx.getSystemInfo インターフェース、そして setData を介した割り当て

しかし、明らかにこれは js を介して行われ、CSS でスタイルを直接設定するほど効率的ではありません。

そこで、別の方法を使用します:

Web ページで body,html{height:100%} を設定します。

子要素で高さを使用できるように、body と html を 100% に設定します。100% でコンテナが作成されます。要素は画面の高さ全体を占めます。

しかし、WeChat アプレットには DOM オブジェクトはありませんが、デバッグ ツールを見ると、DOM ツリー (呼び方がわかりません。そう呼びましょう) にあることがわかります。ルートノードはページなので、page{height:100%}を使ってみましょう

案の定、うまくいきました。高さはアプレット ウィンドウ全体を占めます。

それで、私は喜んで小さなプログラムを書き続けることができます。

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトをサポートしていただきありがとうございます!

WeChat ミニ プログラムで要素が画面の高さ全体を占めるようにする方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。