Kecerunan latar belakang CSS tidak meliputi keseluruhan halaman (termasuk kandungan boleh tatal)
Saya menghadapi masalah dengan kecerunan latar belakang CSS dalam dokumen HTML saya. Saya mereka halaman yang menggunakan kecerunan linear sebagai latar belakang dan menetapkannya pada elemen badan. Masalah yang saya hadapi ialah kecerunan seolah-olah berakhir di mana skrin pada mulanya berakhir, walaupun terdapat lebih banyak kandungan untuk ditatal. Jadi apabila anda menatal ke bawah, contoh kedua kecerunan kelihatan bermula semula.
Ini ialah kod CSS (SCSS) semasa saya:
@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);
}
Tingkah laku yang dijangkakan ialah kecerunan sentiasa meliputi keseluruhan skrin, termasuk kandungan yang pada mulanya tidak kelihatan kerana seseorang itu perlu menatal kepadanya. Saya mahu mengelak daripada mempunyai dua kejadian kecerunan. Pada asasnya, kecerunan harus menyesuaikan diri dengan ketinggian skrin dan juga ketinggian skrol.
Saya cuba menggunakan sifat dan nilai CSS yang berbeza seperti ketinggian: auto; ketinggian min: 100% tetapi ini nampaknya tidak berfungsi. Saya juga mencuba tanpa mengulangi tetapi apa yang dilakukannya ialah ia memaparkan segi empat tepat tulis. Sebarang bantuan akan sangat dihargai! Berikut ialah HTML sekiranya anda memerlukannya untuk menghasilkan semula ralat:
<!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>
Ditunjukkan dalam coretan kod di bawah:
@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>
