无法正确设置粘性页脚

时间：2019-01-04 04:28:43

标签： javascript html css ejs sticky-footer

我正在从有关Udemy的课程中学习Web开发，但遇到了问题。我似乎无法让页脚表现出我想要的方式。关键是，当有更多数据时，页脚开始在其上重叠，因为我在CSS中已将position：relative放在该位置。但是，如果我删除了该内容，如果该页面没有完全填充（例如，登录页面），则页脚不会停留在页面底部，而是跳至“登录”表单的最低部分。

我正在寻求有关如何使页脚固定在页面底部并使其停留在那里并被推入的建议/帮助，以防页面填满数据并到达页脚的边缘。 注意：我正在为此使用EJS，并且具有页眉和页脚部分。

登录表单HTML：

<% include ./partials/header %>

<div class="row">
    <div class="col-md-12">
        <form class="form-signin" action="/login" method="POST">
            <h1 class="mb-3 text-center">Please sign in</h1>
            <label for="inputUsername" class="sr-only">Username</label>
            <input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
                autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
                required>
            <div class="mb-3">
                <a href="/forgot" id="forgotPassword">Forgot password?</a>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
        <div class="form-signin">
            <a href="javascript:history.go(-1)">Go back</a>
        </div>
    </div>
</div>

<% include ./partials/footer %>

标题：

<!DOCTYPE html>
<html>

<head>
    <title>Yelp Camp</title>
    <meta name="viewwport" content="width-device-width, initial-scale-1">
    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
    <link rel="stylesheet" href="/stylesheets/main.css">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
        <a class="navbar-brand" href="/">YelpCamp</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
                    <a class="nav-link" href="/campgrounds">Home</a>
                </li>
            </ul>

            <ul class="navbar-nav navbar-right">
                <% if(!currentUser){ %>
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
                    <a class="nav-link" href="/login">Login</a>
                </li>
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
                    <a class="nav-link" href="/register">Sign Up</a>
                </li>
                <% } else { %>
                <li class="nav-item">
                    <a class="nav-link" href="#">Signed in as
                        <%= currentUser.username %></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">Logout</a>
                </li>
                <% } %>
            </ul>
        </div>
    </nav>

    <div>
        <% if (error && error.length > 0) { %>
        <div class="alert alert-danger" role="alert">
            <%= error %>
        </div>
        <% } %>
        <% if (success && success.length > 0) { %>
        <div class="alert alert-success" role="alert">
            <%= success %>
        </div>
        <% } %>
    </div>
    <div class="container">
        <div class="page-content">

页脚：

</div> <!-- /.page-content -->
</div>
<footer class="footer">
    <div class="container">
        <p class="text-muted">
            &copy; YelpCamp 2018 | <a href="/campgrounds">Home</a>
        </p>
    </div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>

</body>
</html>

相关CSS：

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

.page-content {
    min-height: 100% !important;
    padding: 0 0 -60px !important;
    position: relative;
}

footer .footer-push{
    height: 60px !important;
    position: absolute !important;
    clear: both;
}

.container .text-muted{
    margin: 20px 0 0;
}

我已经尝试了十多种不同的粘式页脚尝试，但到目前为止都没有成功。主要问题是：

  • 几乎没有数据的页面（例如，“登录”页面）的页脚位于屏幕边界下方（需要滚动才能看到它），或者紧接在登录表单之后（而不是我想要的页面底部）它）；
  • 具有足够数据填充页面的页面，页脚在页面中间（甚至在滚动之前）与数据重叠。

当前问题：

Codepen link for the Login Page example of the code.（注意：该问题仅在“全视图”中可见）

如果有人能帮助我找到解决该问题的方法，我将非常感激。

谢谢。

2 个答案:

答案 0 :(得分：1)

使用position:fixed定义粘贴位置，并设置bottom:0定义粘贴位置。

尝试一下

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

.page-content {
    min-height: 100% !important;
    padding: 0 0 -60px !important;
    position: relative;
}

footer .footer-push{
    height: 60px !important;
    position: absolute !important;
    clear: both;
}

.container .text-muted{
    margin: 20px 0 0;
}

footer {position: fixed; bottom:0; text-align:center; width:100%; background:#fff;}
<div class="row">
    <div class="col-md-12">
        <form class="form-signin" action="/login" method="POST">
            <h1 class="mb-3 text-center">Please sign in</h1>
            <label for="inputUsername" class="sr-only">Username</label>
            <input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
                autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
                required>
            <div class="mb-3">
                <a href="/forgot" id="forgotPassword">Forgot password?</a>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
        <div class="form-signin">
            <a href="javascript:history.go(-1)">Go back</a>
        </div>
    </div>
</div>
<!DOCTYPE html>
<html>

<head>
    <title>Yelp Camp</title>
    <meta name="viewwport" content="width-device-width, initial-scale-1">
    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
    <link rel="stylesheet" href="/stylesheets/main.css">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
        <a class="navbar-brand" href="/">YelpCamp</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
                    <a class="nav-link" href="/campgrounds">Home</a>
                </li>
            </ul>

            <ul class="navbar-nav navbar-right">
                <% if(!currentUser){ %>
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
                    <a class="nav-link" href="/login">Login</a>
                </li>
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
                    <a class="nav-link" href="/register">Sign Up</a>
                </li>
                <% } else { %>
                <li class="nav-item">
                    <a class="nav-link" href="#">Signed in as
                        <%= currentUser.username %></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">Logout</a>
                </li>
                <% } %>
            </ul>
        </div>
    </nav>

    <div>
        <% if (error && error.length > 0) { %>
        <div class="alert alert-danger" role="alert">
            <%= error %>
        </div>
        <% } %>
        <% if (success && success.length > 0) { %>
        <div class="alert alert-success" role="alert">
            <%= success %>
        </div>
        <% } %>
    </div>
    <div class="container">
        <div class="page-content">
          </div> <!-- /.page-content -->
</div>
<footer class="footer">
    <div class="container"> 
        <p class="text-muted">
            &copy; YelpCamp 2018 | <a href="/campgrounds">Home</a>
        </p>
    </div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>

</body>
</html>

答案 1 :(得分：0)

您没有定义页脚一定在屏幕的底部。尝试添加它。

.footer {
    bottom: 0;
}

如果遇到其他问题而页脚现在覆盖的问题，只需在最后一个div底部添加与页脚高度相同的空白/边距。

相关问题
最新问题