时间戳

首页 > 解决方案 > 每当您在浏览器中检查 html 元素时，如何防止 html 元素被垂直压缩？

html - 每当您在浏览器中检查 html 元素时，如何防止 html 元素被垂直压缩？

问题描述

我在调试我的联系表单网页时遇到问题。每当您检查元素或更改浏览器的高度时，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 &copy; 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;
}

标签： htmlcss

解决方案

我想你想用位置定位你的导航和页脚：固定：

* {
    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 {
  padding:100px 0;
    flex: 1;
}

/* Designing the navigation's layout*/

nav,
.nav-links {
    display: flex;
}

nav {
position:fixed;
    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 {
position:fixed;
bottom:0;
width:100%;
    padding: 20px 0;
    text-align: center;

    background-color: #FF3333;
    color: white;

    font-size: 18px;
}
<!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 &copy; 2020</p>
        </footer>
    </body>

推荐阅读