CSS如何使这个高度响应？

Question

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

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

正如你可以看到它有点敏感，但是当我关闭窗口下方1200像素的顶部将有更多的空白空间，然后在底部，我怎么能解决这个问题？

另外我用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

也许这将解决您的问题