CSSどのようにしてこの高さを反応させることができますか？

Question

.wrapper { 
 
    margin: 7%; 
 
    height: 79vh; 
 
    background-color: green; 
 
    background-size: 300px; 
 
}

<section class="wrapper"> 
 
    <h1>TEST</h1> 
 
</section>

あなたはそれがやや応答見ることができるように私は1200px以下に、ウィンドウを閉じると、トップは、私はこの問題を解決することができますどのように、その後、底に多くの空白があるのだろうか？

また、私はvhを使用しましたが、tbhは位置を決めるのに少し汚いです。高さがなければ最初の<h1>しか表示されません。あなたが見てとることができ

Answer 1

修正すること。 ？デフォルトで

.wrapper { 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    height:60%; 
 
    width:60%; 
 
    background-color: green; 
 
    transform:translate(-50%,-50%); 
 
}

<section class="wrapper"> 
 
      <h1>TEST</h1> 
 
</section>

Answer 2

あなたがしようとothoreユニットを使用することができ、 一部のユニット：

https://www.w3schools.com/cssref/css_units.asp

多分あなたは心の中で持っているもの、これはあなたの問題