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

어쩌면 당신이 생각하고있는 것을 이것은 문제