最小身長（vh）と体の％

Question

私はなぜ最小の高さを持っている体に

body{ 
    position: relative; 
    overflow: hidden; 
    min-height: 100vh; 
} 

を指定する必要があり、コードを理解しようとしています：高さ

html { 
    height: 100%; 
} 

body, 
html { 
    margin: 0; 
    min-height: 100%; 
    overflow-x: hidden; 
    padding: 0 
} 

にHTMLを設定した後100VH：100 ％body、html to min-height：100％？また身体にmin-height：100％を使用するのはなぜですか？

Answer 1

は、HTMLや身体に任意のプロパティを定義する前に、我々はすなわち

Viewport > html > body

マインド以下theimageでビューポートとhtml、身体の違いを一つのことを知っている必要があります。

height: 100vh =ビューポートの高さの100％

height: 100% =親要素の高さの100％が

ビューポートユニットは、彼らが持っていないことを意味する、相対的な単位であります客観的な測定。代わりに、そのサイズはビューポートのサイズによって決まります。

ビューポートの高さ：vh - ビューポートの高さの1/100。

パーセンテージで定義された要素のサイズは、親要素によって決定されますが、親要素も画面の高さ全体を占める場合、要素の画面全体の高さを満たすことができます。

height: 100%をhtmlとbodyに追加する必要があるのは、デフォルトでサイズがなく、ビューポートがhtmlの親だからです。