这是我在基本模板上使用的 css，因此其他模板将继承它。
body {
font-family: Raleway, sans-serif;
}
header{
background-image: linear-gradient(to bottom, #1a1c1b, #1c2d25, #1b4030, #15533a, #046644);
padding: 1.5em 1em;
}
header h1 {
margin: 0;
font-size: 2em;
font-weight: bold;
}
section a {
padding-left: 10px;
padding-right: 10px;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.header-top{
display: flex;
justify-content: space-between;
font-weight: bold;
align-items:center;
color: white;
}
header a{
color: white;
padding-left: 5px ;
padding-right: 5px;
}
a{
text-decoration: none;
}
.footer-bottom {
display: flex;
justify-content: space-between;
color: white;
}
footer {
background-image: linear-gradient(to bottom, #1a1c1b, #1c2d25, #1b4030, #15533a, #046644);
padding: 1.5em 1em;
position:inherit;
bottom:0;
width:100%;
height:60px;
/* margin-top: -40px; */
}
footer a {
color: white;
padding: 0px;
}
footer p {
margin: 0px;
}
HTML: 其中有一些 Django 链接。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
<link rel="stylesheet" href="{% static "css/base.css" %}">
<link rel="stylesheet" href="{% static "css/normalize.css" %}">
<link rel="stylesheet" href="{% static "css/hover-min.css" %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
{% block head %}
{% endblock %}
</head>
<body class="Site">
<!-- Header -->
<header>
<div class="container">
<div class="header-top">
<h1><a href=""></a> tik</h1>
<nav>
<a class="hvr-bob" href=" {% url 'home' %}">Home</a>
<a class="hvr-bob" href="{% url 'problem_list' %}">Problems</a>
<a class="hvr-bob" href="{% url 'discussion' %}">Discussion</a>
<a class="hvr-bob" href="{% url 'about' %}">About</a>
</nav>
<section>
{% if user.is_authenticated %}
<a class="hvr-glow" href="{{ user.get_absolute_url }}">{{ request.user.username }} </a>
<a class="hvr-glow" href="{% url 'logout' %}">Sign Out</a>
{% else %}
<a class="hvr-glow" href="{% url 'register' %}">Register</a>
<a class="hvr-glow"href="{% url 'login' %}">Sign In</a>
{% endif %}
</section>
</div>
</div>
</header>
<!-- Main Body -->
<main class="Site-content">
{% block body-block %}
{% endblock %}
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-bottom">
<p>© 2018 - Tik</p>
<a class="hvr-icon-grow-rotate" href="{% url 'contact' %}" > Contact Us <i class="fas fa-phone hvr-icon"></i></a>
</div>
</div>
</footer>
</body>
</html>
我想要底部的页脚。我尝试使用 inherit、absolute、fixed、relatve 属性，但只是将它附加到页面的最后一行或者其他方式。现在在线解决方案要求我从头开始编写所有这些。但我认为它可以解决，我只是不知道如何解决!感谢任何帮助。
最佳答案
.Site {
display: flex;
flex-direction: column;
height: 100%;
margin: 0
}
.Site-content {
flex: 1 auto;
}
footer {
height: 90px;
width: 100%;
background: red;
}
应用此 CSS。检查此链接 http://jsfiddle.net/wilsassam/fpg1aLkd/
关于css - 我如何使用 flexbox 让页脚保持在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53663833/