我正在嘗試使我的表單元素（單擊添加書籍時彈出）在頁面上保持靜態。當我調整瀏覽器視窗的大小時，它會縮小并且其中的元素溢位到 div 之外。我沒有為此容器使用彈性框（僅用于 isRead，因為我無法將其居中），是什么導致了這個問題？任何幫助將不勝感激..提前謝謝你。
以下截圖供參考：
全尺寸瀏覽器視窗
縮小視窗時調整表單大小
// User interface //
const popUpForm = document.querySelector(".form-popup");
const button = document.querySelector("#addBook");
const overlay = document.getElementById('overlay');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function() {
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
const updateBooksGrid = () => {
resetBooksGrid()
for (let book of library.books) {
createBookCard(book)
}
}/*CSS RESET*/
* {
margin: 0;
padding: 0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color: #ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg, #d0edff, #9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: 43vh;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead {
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.book-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png" />
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid"></div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content" <form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input type="text" id="title" placeholder="Title">
<input type="author" id="author" placeholder="Author">
<input type="pages" id="pages" placeholder="Pages">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>uj5u.com熱心網友回復：
您的問題在于您的 CSS。您可以通過在容器中將高度更改為 auto 來解決它：
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524043.html
上一篇：表單集中的每個表單驗證