Der CSS-Hintergrundverlauf deckt nicht die gesamte Seite ab (einschließlich scrollbarer Inhalte).
Ich habe Probleme mit dem CSS-Hintergrundverlauf in meinem HTML-Dokument. Ich habe eine Seite entworfen, die einen linearen Farbverlauf als Hintergrund verwendet und ihn auf das Körperelement setzt. Das Problem, mit dem ich konfrontiert bin, besteht darin, dass der Farbverlauf dort zu enden scheint, wo der Bildschirm ursprünglich endet, obwohl mehr Inhalt zum Scrollen vorhanden ist. Wenn Sie also nach unten scrollen, scheint die zweite Instanz des Farbverlaufs von vorne zu beginnen.
Dies ist mein aktueller CSS-Code (SCSS):
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left, .content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input, textarea, select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown), textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder, textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown) ~ #popup {
display: block;
}
button, input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover, input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
Das erwartete Verhalten besteht darin, dass der Farbverlauf immer den gesamten Bildschirm abdeckt, einschließlich Inhalten, die zunächst nicht sichtbar sind, weil man dorthin scrollen muss. Ich möchte vermeiden, dass es zwei Instanzen eines Farbverlaufs gibt. Im Wesentlichen sollte sich der Farbverlauf an die Höhe des Bildschirms und sogar an die Höhe des Scrolls anpassen.
Ich habe versucht, verschiedene CSS-Eigenschaften und -Werte wie height: auto; min-height: 100 % zu verwenden, aber diese scheinen nicht zu funktionieren. Ich habe es auch versucht, ohne es zu wiederholen, aber es zeigt ein Schreibrechteck an. Jede Hilfe wäre sehr dankbar! Hier ist der HTML-Code, falls Sie ihn benötigen, um den Fehler zu reproduzieren:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="../assets/icons/social.png"/>
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<script src="../javascript/register.js"></script>
<script src="../javascript/cookie.js"></script>
</body>
</html>
Demonstriert im folgenden Codeausschnitt:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
