Seite ist größer als erforderlich. Problem; React.js

Question

Die aktuelle Seite sieht wie folgt aus: Wie Sie sehen können, gibt es oben viel Leerraum. Ich kann anscheinend nicht herausfinden, wie ich diese Leerstelle verschwinden lassen kann. Dies ist der HTML-Code:

<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>

Bitte beachten Sie, dass der Code nicht korrekt kopiert wird, da einige der Funktionen recht lang sind, da ich über SSH programmiere. Wenn jemand eine bessere Lösung hat, wäre ich sehr dankbar. (Ich verwende einen VPS ohne UI) Hier ist das 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%;
}

Ich programmiere dies in React.js.

Ich habe versucht, eine absolute Position zu erzwingen, aber dadurch sieht die Seite auf kleineren Bildschirmen seltsam aus. Schließlich möchte ich, dass sich der Anmeldecontainer oben auf dem Bildschirm befindet. Denken Sie daran, ich möchte nicht, dass dies in CSS erscheint, ich möchte, dass es nach Möglichkeit in HTML erscheint.

Wenn jemand Vorschläge für die Fernprogrammierung ohne SSH hat, kontaktieren Sie mich bitte! ;)

-Danke! :)

Answer 1

如果您使用flexbox居中内容，使用App选择器，然后将.auth-form-container设置为具有height：100％将填充整个容器高度，因此30rem margin-top可能是被淘汰。尝试一下，如果它不起作用，请附加一个工作片段，以便我们可以看到真正的问题。希望对您有帮助！