アドレスバー（モバイル）

Question

モバイルでフルスクリーンメニューを作成したいのですが、アドレスバーは常に見栄えが悪いので、フルスクリーンメニューの高さの問題です。

マイメニューの高さは4で、位置はfixedです。 問題は、ユーザーがモバイルでページをスクロールすると、ページの下部に少しの隙間があり、ユーザーはナビゲーションの背後にあるページを見ることができるということです。この問題を解決する良い解決策はありますか？あなたは、私がheightとtop属性のvhユニットを使用している見ることができるように

.menu-item{ 
    position: fixed; 
    width:100vw; 
    height:25vh; 
    left:0; 
} 
.menu-item:nth-child(1){ 
    top:0; 
} 
.menu-item:nth-child(2){ 
    top:25vh; 
} 
.menu-item:nth-child(3){ 
    top:50vh; 
} 
.menu-item:nth-child(4){ 
    top:75vh; 
} 

：

<nav> 
    <div class="menu-item"><a href="#">Menu item1</a></div> 
    <div class="menu-item"><a href="#">Menu item2</a></div> 
    <div class="menu-item"><a href="#">Menu item3</a></div> 
    <div class="menu-item"><a href="#">Menu item4</a></div> 
</nav> 

とのstyle.css：ここ

はHTMLファイルです。

クロームではうまくいっていますが、iPhoneのサファリとクローム（最新の両方）ではありません。代わりに、そのような各要素を固定する

Answer 1

、なぜ単に親を修正し、各子供に25％をしない：

nav { 
 
    /* covers the whole screen so you shouldn't get a gap*/ 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.menu-item { 
 
    min-height: 25%; 
 
}

<nav> 
 
    <div class="menu-item"><a href="#">Menu item1</a></div> 
 
    <div class="menu-item"><a href="#">Menu item2</a></div> 
 
    <div class="menu-item"><a href="#">Menu item3</a></div> 
 
    <div class="menu-item"><a href="#">Menu item4</a></div> 
 
</nav>