メインが100％の高さに設定されていないだろう - Codepenは

Question

質問の背景に含ま：私はスライド式のメニューパネルに探していますし、これを表示するには、次のようにcodepenいる

を：

http://codepen.io/daveharris/pen/pEvEad

を問題：

<main>コンポーネントは、slide-panelスタイルが適用されています以下これはモバイルビューで

#main { 
    background: red; 
    height: 100vmin!important; 
} 

示すよう<main>成分が、これは赤色の背景色を用いて表示され、100％の高さに設定されていない。

この高さの問題は、パネルが閉じているときに示すように、基本となるメニューを見ることができることを意味します

100％のスタイリングがモバイルビューの高さ全体に適合しないのはなぜですか？私はAngularJSプロジェクトでこれを使用する

注ので、私はすべてのコンテンツをラップする2つのdivを持って、次のようにこれらの名前が付けられます。

<div id="ui-view"> 
<div id"ResultsController"> 

なぜモバイルビューの高さではないでしょう100％の高さに設定されていますか？

Answer 1

今すぐ#mainの高さはwidthと同じです。オン#mainに変更：

#main { 
    background: red; 
    min-height: 100vh; 
} 

これで問題は解決します。 min-heightまたはちょうどheight。 vhは、ビューポートの高さを意味するので、すべてのビューをカバーします。

Answer 2

モバイルで作業する場合、ビューポートの高さであるとビューポートの幅であるvwを使用するのが最善です。

次の操作を実行したいと思い、あなたの要素について

：

#main { background-color: #ff0000; min-height: 100vh; // vh = viewport height