我的问题是页脚。当元素列表为空时，页脚几乎到达导航栏本身。我试图以某种方式绕过它，但我不是前端开发人员，但我失败了。
我使用带有自定义类 .page-footer 的 Bootstrap 4。
CSS 代码:
.page-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
border-top: .05rem solid #e5e5e5;
}
html代码:
{% block footer %}
<footer class="page-footer">
<div class="container ">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="{% static 'images/small_image.png' %}">
<small class="d-block mb-3 text-muted">© 2018</small>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
</div>
</div>
</footer>
{% endblock footer %}
整个 html 页面:
<!DOCTYPE html>
<html lang="en">
{% block header %}
<head>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
</head>
{% endblock header %}
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Link</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
{% if user.is_authenticated %}
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"> All links <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">All links</a>
</li>
</ul>
<form action="#" method="get" class="ml-3 my-auto d-inline w-20">
<div class="input-group input-group-sm">
<input type="text" class="form-control border-right-0">
<div class="input-group-append">
<button class="btn btn-outline-primary border-left-0" type="submit">Search</button>
</div>
</div>
</form>
<div class="my-auto d-inline ml-3">
<ul class="navbar-nav">
<li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm mr-3">Link</a></li>
<li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm">Link</a></li>
</ul>
</div>
<div class="nav navbar-nav ml-auto dropdown">
<button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
User
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
</div>
</div>
</div>
{% endif %}
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
{% block content %}{% endblock content %}
{% block sidebar %}
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Title</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<!--<div class="col-lg-6">-->
<!--<ul class="list-unstyled mb-0">-->
<!--<li>-->
<!--<a href="#">JavaScript</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">CSS</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#">Tutorials</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
</div>
</div>
{% endblock sidebar %}
</div>
<!-- /.row -->
</div>
<!-- /.container -->
{% block footer %}
<footer class="page-footer">
<div class="container ">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="{% static 'images/small_image.png' %}">
<small class="d-block mb-3 text-muted">© 2018</small>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
</div>
</div>
</footer>
{% endblock footer %}
</body>
</html>
最佳答案
当你说:
the footer reaches almost the navigaton bar
...根据评论，听起来您的问题是页脚并不总是至少位于屏幕的垂直底部并且离您的导航栏太近了。
您的问题不一定出在页脚本身，您可以通过多种方式解决此问题，具体取决于您想要的结果。
一种解决方案是添加
position:absolute;
width: 100%;
bottom:0;
...到页脚，就像我在 This codepen 中所做的那样.
现有答案中有附加解决方案Such as this one .
关于html - 页脚几乎占满整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55251258/