絶対配置された親の子divがページの高さ全体を占めていない

Question

私が取り組んでいるプロジェクトのバグに問題があります。

ビューポートの高さを768px未満にしたいモバイルメニューは、100％に設定しても高さがありません。

ハンバーガーアイコンを使用して切り替えると表示されます。

nav要素が絶対に配置され、移動メニューはnav要素の最後の子要素です。

はnav要素は絶対に背景が透明になるようにをを配置され、その下sectionは、ページの上部にすることができます。

モバイルデバイスで切り替えたときにmobile_linksクラスのdivでページの高さ全体を占めたいと考えています。

は私がrelativeにnav以下sectionのpositionプロパティを設定し、top: -40pxを設定することで、それまでの回避策を持っています。

nav要素のpositionプロパティをstaticに設定する必要があります。

しかし、ページ上の2つのsection要素の間に空白が残るため、これは気に入らないのです。

現時点で持っているpositionのプロパティを変更せずにモバイルメニューの高さを100％にする方法はありますか？ここで

は私が話していますページへのリンクです：https://carifood-init.appspot.com/

Answer 1

あなたheight: 100%問題を解決するには、この記事を見てきた：別の方法として

• Working with the CSS height property and percentage values

を、height: 100vhを使用してください。スペックから

：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

ビューポートのパーセンテージ長は 初期包含ブロックのサイズに対するものです。ブロックを含む最初の の高さまたは幅が変更されると、それに応じて拡大/縮小されます。

• VW部 - 初期包含ブロックの幅の1％に等しいです。
• vhユニット - ブロックの最初の高さの1％に等しい。 ブロック。
• vmin単位 - vwまたはvhの小さい方と等しい。
• vmaxユニット - vwまたはvhの大きい方と同等です。
このジョブの

Browser Compatibility（ビューポート単位はIE 9、10および11、およびエッジを除いて、主要なブラウザ間でかなりのフルサポートを持っている、vmaxをサポートしていません）

Answer 2

使用jqueryの：あり私は画面の100％のセクションの高さを作るために使用した例です（ページを見るデバイスに応じて、それは多かれ少なかれ高さで実行されるため、応答します）。

<script> 
$(document).ready(function(e) { 
    var wheight = $(window).height(); 
    $('.section').css("min-height", wheight); 
}); 
</script> 

希望すると助かります！