ウェブページの高さをモバイル画面の高さに合わせる

Question

私はモバイルアプリを持っています。私はすべての携帯電話で私のCSSを動作させたいです。これを行うには私はすべての私のCSSの呼び出しのためのパーセンテージを使用します。

.Wrapper 
{ 
    margin: auto; 
    text-align: center; 
    width: 60%; 
} 

問題は、私は、Webページの高さは、すべてのページで一致して得ることができないということです。これは、Androidの画面が大きくて（下部に空白が多い）、他の携帯はそうではないことを意味します（下の画像がAndroidであるとします）。

私はすべて同じになるように高さを得るために、これを試してみました：

body 
{ 
    text-align: center; 
    font-family: Helvetica, Arial, sans-serif; 
    color: Black; 
    background: #39bcd4 none; 
    height: 100%; 
    width: 100%; 
} 

width作品が、高さがありません。高さを同じようにするにはどうすればいいですか？高さがオフになっている場合は、すべて私のパーセンテージがあまりにもオフであることを行っているSitepoint's CSS Referenceから

Answer 1

（各モバイルブラウザ用に調整しようとする）：

パーセンテージ値は、要素の包含ブロックの高さを参照してください。包含ブロックの高さが明示的に指定されていない場合（つまりコンテンツの高さに依存する場合）、この要素は絶対的に配置されていません。パーセント値はautoとして扱われます。パーセンテージ値は、表のセル、表の行および行のグループのautoとしても扱われます。 position:absolute;にあなたの体を設定

それはあなたのabsoluteポジショニングと一緒にtop:0;とbottom:0;を追加してみていない場合は、動作するはずです。

Answer 2

あなたはコンテンツが高さを埋めるためにスペースを空けたいと思っていますか？それができるかどうかは確かではありませんが、すべての空白に対する1つの設計上の解決策は、コンテンツが少し孤独に見えるように、下部が暗くなる垂直グラデーションの背景を持つことです。

Answer 3

あなたのサイトの幅と高さがあなたのWebViewの幅と高さの100％になりたいなら、あなたは、ビューポートのメタタグ設定する必要がありますとともに、本の

<meta name="viewport" content="width=device-width,height=device-height initial-scale=1"> 

偉大な説明をハイブリッドアプリの他のヒントの数は、the Chrome developer siteにあります。

Answer 4

は次のようにCSSで、ビューポートの高さ単位を使用します。

.element { max-height: 100vh; } 

または

.element { min-height: 100vh; } 

あるいは

.element { min-height: calc(100vh - 60px); } 

あなたは要素の高さを調整する必要がある場合は、完全な高さではありません。