CSS Comment puis-je adapter cette hauteur?

Question

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

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

Comme vous pouvez le voir un peu sensible, mais quand je ferme la fenêtre ci-dessous pour 1200px haut aurez plus d'espace blanc puis le fond, comment puis-je résoudre ce problème?

Aussi j'ai utilisé vh mais c'est un peu sale à mettre en place. Si je n'avais pas de hauteur, le premier <h1> n'apparaîtra plus?

Answer 1

Est-ce que vous avez à l'esprit. ?

.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

vous pouvez essayer d'utiliser une unité othore, certaines unités, vous pouvez jeter un oeil à:

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

peut-être qui résoudra votre problème