【发布时间】：2020-04-10 19:28:03
【问题描述】：
我在调试我的联系表单网页时遇到问题。每当您检查元素或更改浏览器的高度时，html 元素都会被压缩。每当用户更改浏览器的高度或检查 html 元素时，我不希望 html 元素压缩。相反，我想要一个垂直滚动的滚动条，但我在弄清楚如何做到这一点时遇到了问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<title>Jackson | Contact</title>
</head>
<body>
<nav>
<h1 class="title">Jackson's Guitar</h1>
<ul class="nav-links">
<li><a href="#">About</a></li>
<li><a href="#">Guitars</a></li>
</ul>
</nav>
<main class="container">
<div class="contact-form">
<h2>Contact Us</h2>
<form action="" id="contact-form">
<div class="first_name">
<label for="first_name">First:</label>
<input type="text" id="first_name" required>
</div>
<div class="last_name">
<label for="last_name">Last:</label>
<input type="text" id="last_name" required>
</div>
<div class="email">
<label for="email">Email: </label>
<input type="email" id="email" required>
</div>
<div class="user_message">
<label for="user_message">Message:</label>
<textarea id="user_message" required></textarea>
</div>
<div class="button">
<input type="button" id="submit" value="Submit">
</div>
</form>
</div>
</main>
<footer>
<p>Diego Salas Polar © 2020</p>
</footer>
</body>
CSS 文件
css/base.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Assistant', sans-serif;
}
/* Creating the sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
}
/* Designing the navigation's layout*/
nav,
.nav-links {
display: flex;
}
nav {
width: 100%;
align-items: baseline;
}
.nav-links {
list-style: none;
}
.title{
flex-grow: 1;
padding: 1em;
}
/* Designing the .container and form's layout */
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.container .contact-form {
display: flex;
flex-direction: column;
width: 60vw;
max-height: 65vh;
margin-top: 35px;
}
.container h2 {
text-align: center;
}
.contact-form form {
display: flex;
flex-direction: column;
min-height: 50vh;
padding: 0 20px;
justify-content: space-evenly;
}
.contact-form form div {
display: flex;
}
.contact-form form div label {
flex-grow: 1;
}
/* Styling the navigation links */
nav {
background-color: #FF3333;
}
.title {
color: white;
font-size: 25px;
}
.nav-links li a {
margin-right: 10px;
padding: 12px;
border-radius: 2px;
color: white;
text-decoration-line: none;
font-size: 18px;
}
.nav-links li a:hover {
background-color: white;
color: #FF3333;
}
/* Styling the main content of the site*/
.container h2 {
color: white;
}
.contact-form form label {
color: white;
}
.container {
background-color: #999999;
}
.contact-form form {
margin-top: 20px;
background-color: #669999;
border-radius: 12px;
}
.contact-form form input[type='text'],
.contact-form form input[type='email'] {
width: 40vw;
height: 30px;
}
.contact-form form textarea {
width: 40vw;
height: 12vh;
font-size: 16px;
}
.contact-form form input[type='button'] {
width: 10vw;
height: 5vh;
}
.contact-form form div label,
.contact-form form div input {
font-size: 18px;
}
.button {
justify-content: flex-end;
}
/* Styling the button */
#submit{
background-color: #003333;
color: white;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
border: none;
}
#submit:hover {
background-color: white;
color: #003333;
}
/* styling the footer and inserting the footer's layout */
footer {
padding: 20px 0;
text-align: center;
background-color: #FF3333;
color: white;
font-size: 18px;
}
【问题讨论】：