垂直方向のサイズ変更を固定する

Question

ブラウザの高さを最小限に抑えるためにページを固定する方法を知りました。現在のところ、高さは応答性が高く、すべてが詰まってしまいます。 StackOverflowのサイズを変更した場合、heightは静的なままで、応答しなくなり、それが私の目的です。私は基本的な形のバイブルを追加しました。

https://jsfiddle.net/sto3d7e4/

HTML：

<div class="contactform"> 
<div class="bg"> 
    <h1><img src="https://i.imgur.com/F8fAFJH.png" alt="">Contact Form</h1> 
    <form action="" 
    method="POST"> 
    <input type="text" placeholder="Name" name="name"> 
    <input type="text" placeholder="Program of Interest" name="Program"> 
    <input type="text" placeholder="Gender" name="gender"> 
    <textarea placeholder="Questions/Concerns"></textarea> 
    <input id="button" type="submit" value="Send"> 
    </form> 
    </div> 
</div> 

CSS：

.contactform { 
display: flex; 
height: 100vh; 
justify-content: center; 
align-items: center; 
background: #eee; 
} 

.contactform input { 
display: block; 
margin: 10px 0px; 
height: 50px; 
width: 400px; 
background: transparent; 
border: 0.1px solid; 
outline-color: #eee; 
color: #eee; 
} 

input::placeholder { 
color: #eee; 
padding: 0px 10px 
} 

.bg { 
width: 80vw; 
height: 80vh; 
background: #89c4f4; 
position: relative; 
position: fixed; 
} 

.bg { 
position: relative; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
} 

.bg h1 { 
margin: 0; 
color: #eee; 
align-items: center; 
justify-content: center; 
display: flex; 
} 

.bg img { 
height: 40px; 
margin-right: 15px; 
} 

.bg textarea { 
width: 400px; 
height: 100px; 
/max-width: 250px; 
max-height: 200px; 
background: transparent; 
border: 0.1px solid #eee; 
color: #eee; 
outline-color: #eee; 
} 

textarea::placeholder { 
color: #eee; 
padding: 0px 10px 
} 

#button { 
background:; 
color: #eee; 
border: 0.1px solid #eee; 
transition: 0.2s all ease-in-out; 
} 

#button:hover { 
background: #eee; 
color: #89c4f4; 
} 

Answer 1

は試してみてくださいdisplay:block

.menu_item{ 
 
    height: 15%; 
 
    width: 45%; 
 
    text-align: center; 
 
} 
 
.menu_icon{ 
 
    width:auto; 
 
    height:100%; 
 
} 
 
.menu_item a { 
 
    display:block; 
 
}

<div class="menu_item"> 
 
    <a href="https://www.google.com"> 
 
     <img class="menu_icon" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" alt="Templates"/> 
 
     <span>Templates</span> 
 
    </a> 
 
</div>