Halaman lebih besar daripada isu yang diperlukan;

Question

Halaman semasa adalah seperti berikut: Seperti yang anda boleh lihat, terdapat banyak ruang putih di bahagian atas. Saya seperti tidak dapat memikirkan cara untuk menghilangkan ruang kosong itu. Ini ialah HTML:

<div className="auth-form-container" style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100%'}}>
            <img src={logo} alt="VaporCode Logo"></img>
            <h2 style={{ color: 'white' }}>Register</h2>
        <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
            <input value={firstname} firstname="firstname" id="firstname" placeholder="First Name" />
            <label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>
            <input value={lastname} lastname="lastname" id="lastname" placeholder="Last Name" />
            <label htmlFor="email" style={{ color: 'white' }}>Email</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
            <label htmlFor="username" style={{ color: 'white' }}>Userame</label>
            <input value={username} username="username" id="username" placeholder="Username" />
            <label htmlFor="password" style={{ color: 'white' }}>Password</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
            <label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
            <input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" nam>
            <button type="submit">Register</button>
        </form>
        <linkbutton className="link-btn" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.</linkbutton>
        <div style={{ display: "flex", justifyContent: "center" }}>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR" width="294" height="48" frameborder="0">
        </div>
    </div>

Sila ambil perhatian bahawa kerana beberapa fungsi agak panjang, kod tidak akan disalin dengan betul kerana saya memprogramkan melalui SSH. Jika sesiapa mempunyai penyelesaian yang lebih baik ia akan sangat dihargai. (Saya menjalankan vps tanpa ui) Berikut ialah CSS:

App {
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}

.auth-form-container, .login-form, .register-form {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px)  {
  .auth-form-container {
    position:absolute;   
    justify-content: center;
    padding: 1rem;
    border: solid #222222;
    background-color: #000000;
    fill: solid #000000;
    border-radius: 10px;
    margin:30rem;
  }
}

label {
  text-align: left;
  padding: 0.25rem 0;
}
input {
  margin: 0.5rem 0;
  padding: 1rem;
  border: none;
  border-radius: 10px;
}


button {
  border: none;
  background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight : bold;
  transition-duration: 2s;
}


linkbutton {
  border: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.link-btn {
  background: none;
  color: white;
  text-decoration: underline;
}
img {
    margin: 0 auto;
    max-width: 10%;
    height: 10%;
}

Saya memprogramkan ini dalam react.js.

Saya cuba memaksa kedudukan menjadi mutlak, tetapi ini menjadikan halaman kelihatan pelik pada skrin yang lebih kecil. Akhir sekali, saya mahu bekas log masuk berada berhampiran bahagian atas skrin. Ingat, saya tidak mahu ini muncul dalam CSS, saya mahu ia muncul dalam HTML jika boleh.

Selain itu, jika sesiapa mempunyai cadangan untuk pengaturcaraan jauh tanpa ssh, sila hubungi saya! ;)

-Terima kasih! :)

Answer 1

Jika anda menggunakan flexbox untuk memusatkan kandungan, penggunaan App选择器，然后将.auth-form-container设置为具有height：100％将填充整个容器高度，因此30rem margin-top mungkin sudah usang. Cubalah dan jika ia tidak berkesan, sila lampirkan coretan yang berfungsi supaya kami dapat melihat masalah sebenar. harap ia membantu anda!