CordovaアプリのTabbarをさまざまなモバイル画面サイズにうまく合わせるにはどうすればよいですか？

Question

私はMeteorとReactで開発されたCordovaアプリケーションのタブバーコンポーネントを持っています。私は、タブバー（またはフッター）が本体がスクロール可能な状態で常にモバイル画面の下部に配置されることを確認したいと思います。画像のモックアップは、スクロール可能なコンテンツとタブバーを備えたモバイル画面を示しています。 第2に、タブバーがさまざまなサイズのモバイルデバイスにうまく収まるようにしたいと考えています。
これらの2つがCSSまたはビューポート設定やCordova config.xmlと完全に関連しているかどうかはわかりません。 これらの2つのニーズに対処する最善の方法は何ですか？

Answer 1

私は、ID "タブバー" と、このようないくつかのCSSとHTMLのdivを作成します。

#tabBar { 
position:fixed; 
bottom:0; 
background:#000; 
color:#fff; 
width:100%; 
height:50px;} 

次にあなたがクラスに関連付けられているアイコンのdivを持つことができ、同様に：

#tabBar .icon { 
float:left; 
width:25%; 
height:100%; 
color:#ffffff;}