Currently enrolled in a web development course on Udemy, I am facing an issue with the footer on my webpage. Even after setting its CSS position to relative, the footer overlaps the content when more data is added. However, removing this positioning causes the footer to jump up when the page isn't completely filled, such as on the Login page.
I need guidance on how to make the footer stick to the bottom of the page, adjusting accordingly as the content fills up and reaches the footer's edges. Please note that I am using EJS with header and footer partials.
Here is the HTML for the Login form:
<% 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 %>The header section:
<!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">The footer section:
</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>The relevant CSS styles:
.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;
}Despite trying several solutions for sticky footers, none have resolved the issues I'm facing. The main concerns are:
- The footer appears below screen bounds or right after the login form on pages with minimal content;
- On pages with sufficient data, the footer overlaps the content prematurely.
Current challenges:
Codepen link showcasing the Login Page example code. (Note: Problem visible only in Full view)
Your assistance in finding a suitable solution would be greatly appreciated. Thank you.