Я изучаю веб-разработку из курса по Udemy и столкнулся с проблемой.Я не могу заставить нижний колонтитул вести себя так, как я хочу.Дело в том, что когда появляется больше данных, нижний колонтитул начинает перекрываться, как я поставил позицию: относительно этого в CSS.Но если я уберу это, если страница заполнена не полностью (например, страница входа в систему), нижний колонтитул не останется внизу страницы, а вместо этого перейдет на самые нижние части формы входа в систему.
IЯ прошу совета / помощи по поводу того, как заставить нижний колонтитул придерживаться нижней части страницы и чтобы он оставался там и толкался в случае, если страница заполняется данными и достигает краев нижнего колонтитула.Примечание: я использую 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;
}
Я пробовал целых дюжину различных попыток для колонтитулов, но ни одна из них до сих пор не работала.Основными проблемами были:
- На странице, почти не содержащей данных (например, на странице входа в систему), нижний колонтитул находился ниже границ экрана (для его просмотра требовалась прокрутка) или сразу после формы входа (не привнизу страницы, где я хотел бы иметь ее);
- На странице с достаточным количеством данных для заполнения страницы нижний колонтитул перекрывал данные в середине страницы (даже до прокрутки).
Текущие проблемы:
Ссылка на кодовую ссылку для примера страницы входа на странице кода. (Примечание: Проблема видна только в режиме полного просмотра)
Буду очень признателен, если кто-нибудь поможет мне найти решение этой проблемы.
Спасибо.