【发布时间】：2019-05-30 16:23:06
【问题描述】：
我正在通过 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">
© 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;
}我已经为粘性页脚尝试了十几种不同的尝试，但到目前为止都没有奏效。主要问题是：
- 几乎没有数据的页面（例如登录页面）的页脚位于屏幕边界下方（需要滚动才能看到）或在登录表单之后（不在我想要的页面底部）它）；
- 具有足够数据填充页面的页面的页脚与页面中间的数据重叠（甚至在滚动之前）。
当前问题：
- The footer in the login page is not staying at the bottom of the page
- Even though the footer's height is set to 60px, it just shrinks to around 19 (zoomed out view)
Codepen link for the Login Page example of the code.（注意：问题仅在全视图中可见）
如果有人能帮助我找到解决此问题的方法，我将不胜感激。
谢谢。
【问题讨论】：
-
你有 fiddle 或 codepen 演示吗？
-
您的 sn-p 不工作，请编辑并运行
-
到目前为止，我是在 VSCode 上做的。但我会尝试为此设置一个 codepen 演示，如果它在那里以相同的方式工作。
-
@Justcode 抱歉，sn-p 是我可以在这里从 ejs 插入代码的唯一方法，如果我使用其他方法，它就不起作用。我是这方面的初学者，目前还不确定如何从 ejs 更改它以使其在 sn-ps 中运行。我将尝试发布我面临的问题的屏幕截图
标签： javascript html css ejs sticky-footer