垂直调整大小固定

我想知道如何在最小化浏览器高度时使页面固定。到目前为止，身高反应迅速，一切都变得臃肿起来。如果您调整StackOverflow的大小，高度保持静态并且不响应，这就是我要做的。我添加了一个基本形式的小提琴。垂直调整大小固定

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; 
}

来源

2017-08-04 RogerFedFan

你使用'vh'作为'height'，即相对于视口（窗口）的高度...... –

@UsagiMiyamoto是解决它。不过，我仍然希望将视口的高度设置为100％。有什么办法吗？ – RogerFedFan

试试'min-height：100vh;'...... –

尝试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>

来源

2017-08-04 04:09:45

垂直调整大小固定

回答

相关问题