Wie kann ich verhindern, dass meine Fußzeile beim Zoomen abrutscht?

Ich habe ein Problem mit meiner Seite, die beim Vergrößern oder Verkleinern der Fußzeile und der Formulare einfach wegrutschen, wo ich es haben wollte. Gibt es überhaupt eine Lösung des Problems? Ich habe versucht, im Internet nach Lösungen zu suchen, habe aber nicht für mich gearbeitet. Vielen Dank im Voraus für jede Hilfe.Wie kann ich verhindern, dass meine Fußzeile beim Zoomen abrutscht?

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Registration Form</title> 
     <link rel="stylesheet" href="style.css">   
    </head> 
    <body> 
     <div id="container"> 
      <header> 
       <h1>Registration Form</h1> 
       <hr> 
      </header> 
      <article> 
       <form action="#"> 
        <label for="FirstName"><b>First Name:</b></label> 
        <input name="FirstName" type="text" placeholder="John" required> 
        <label for="LastName"><b>Last Name:</b></label> 
        <input name="LastName" type="text" placeholder="Doe" required> 
        <label for="email"><b>Email:</b></label> 
        <input name="email" type="text" placeholder="[email protected]" required> 
        <label for="password"><b>Password:</b></label> 
        <input name="password" type="password" placeholder="Password here." required> 
        <p></p> 
        <input type="submit" value="Submit"> 
       </form> 
      </article> 
      <footer> 
       Copyright @ 2017 Your name here 
      </footer> 
     </div> 
    <script src="main.js"></script> 
    </body> 
</html>

CSS:

header h1 { 
    text-align: center; 
    margin: -60px 0 10px 0; 
} 

hr { 
    margin: 0 -80px 0 -80px; 
} 

form input { 
    display: block; 
} 

body { 
    background-color: gray; 
} 

html, body { height: 100%; width: 100%; margin: 0; } 

article { 
    margin: 50px 0 0 0; 
    display: flex; 
    justify-content: center; 
    overflow: hidden; 
} 

footer { 
    text-align: center; 
    color: white; 
    background-color: black; 
    margin: 68px -80px 0 -80px; 
    overflow: hidden; 
} 

#container { 
    padding: 80px; 
    background-color: white; 
    width: 600px; 
    height: 259px; 
    margin: 0 auto; 
    overflow: hidden; 
}

Quelle

2017-07-13 Matias Tresch

In Ihrem #container, ich entfernt Ihre width: 600px weil es Ansprechbarkeit zu verhindern und das hinzugefügt max-width: 100%.

#container { 
    padding: 80px; 
    background-color: white; 
    height: 259px; 
    margin: 0 auto; 
    overflow: hidden; 
    max-width: 100%; 
}

Überprüfen Sie es! ~~https://jsfiddle.net/5x48bzo5/~~

EDIT: Hier ist die neue JSFiddle. https://jsfiddle.net/5x48bzo5/3/

Quelle

2017-07-13 14:12:33

Ich habe versucht, aber nicht funktioniert, leider, wenn ich zoome in oder aus der Fußzeile rutscht immer noch aus. Danke für die Hilfe tho –

Ich bin mir nicht sicher, was du meinst. Könnten Sie einen Screenshot machen und mir das Problem zeigen? Ich kann es nicht auf JSFiddle reproduzieren. –

Kannst du Strg gedrückt halten und dann das Mausrad in der Ausgabe nach oben und unten bewegen? Was ich mit meinem Problem meinte, war, dass die Fußzeile (schwarze Balken am unteren Rand der Seite) von der Standardposition rutschte, wenn ich heranzoomte (wie 110%, etc ..) –

Wie kann ich verhindern, dass meine Fußzeile beim Zoomen abrutscht?

Antwort

Verwandte Themen