如何阻止弹窗表单元素在浏览器窗口缩放时移位及内容溢出？

Hey there! Let's break down why your "Add Book" popup form is shrinking and spilling content when you resize the browser, plus how to fix it for good.

What's Causing the Problem? #

• vh units are making the form shrink with the viewport: Your .form-content uses 30vh for width and 43vh for height. Since vh is relative to the browser's viewport height, the form gets smaller every time you shrink the window. But your form elements (like inputs with fixed height: 50px) don't shrink along with it—so they end up overflowing the container.
• No hard minimum size constraints: The .form-container has min-width and min-height set in vh too, which means those minimums shrink when the viewport does. There's nothing stopping the form from getting tiny enough to break your layout.
• Missing overflow handling: Even if the container shrinks a little, you haven't told it what to do when content doesn't fit—so elements just spill out.

Step-by-Step Fixes #

Let's adjust your CSS to keep the form stable and contained:

1. Swap vh for Stable Sizing Units #

Replace the viewport-based units for your form with fixed pixels (for consistent size) plus a max-width to handle small screens. Update these classes:

.form-popup {
  display: none;
  position: fixed; /* Use fixed instead of absolute to stay centered during scroll */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  text-align: center;
  border-radius: 20px;
  width: 320px; /* Fixed base width */
  max-width: 90vw; /* Cap width on tiny screens */
  min-height: 450px; /* Ensure minimum height for all elements */
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  gap: 10px;
  box-sizing: border-box; /* Include padding/border in width/height calculations */
  overflow-y: auto; /* Add vertical scroll if content exceeds container */
}

.form-container {
  min-width: 280px; /* Fixed minimum width */
}

2. Fix Input & Button Sizing #

Ensure your form elements fit properly inside the container and don't cause overflow:

input {
  border-radius: 10px;
  height: 50px;
  margin: 3px 0;
  width: 100%;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  box-sizing: border-box; /* Prevent padding from breaking width */
  padding: 0 10px; /* Add internal padding for better text spacing */
}

#submit {
  margin-top: 10px;
  height: 50px; /* Match input height for consistency */
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
  background-color: #27476E; /* Match your Add Book button style */
  font-size: 1.2rem;
}

#submit:hover {
  background-color: #192c44; /* Consistent hover state */
}

Why This Works #

• Fixed width + max-width keeps the form from getting too small or too wide.
• overflow-y: auto adds a scrollbar only when needed, so all form fields stay accessible even on tiny screens.
• box-sizing: border-box ensures padding and borders don't add extra width/height to elements, preventing unexpected overflow.
• Using position: fixed keeps the form centered even if the user scrolls the page.

内容的提问来源于stack exchange，提问作者Dilek