Question

我的页面出现问题，当我放大或缩小页脚时，表格只会滑落到我想要的位置。无论如何解决这个问题？我尝试过上网寻求解决方案，但对我没有用。提前感谢您的帮助。

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="example@mail.com" 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;
}

Answer 1

在#container，我删除了您的width: 600px，因为它阻止了响应，并添加了max-width: 100%。

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

看看吧！ ~~https://jsfiddle.net/5x48bzo5/~~

编辑：这是新的JSFiddle。 https://jsfiddle.net/5x48bzo5/3/

如何在放大时阻止我的页脚滑落？

1 个答案: