Question

这是我在基本模板上使用的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>&copy 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属性，但这只是将其附加到页面的最后一行或其他方式。现在在线解决方案要求我从头开始写所有这些。但是我认为这可以解决，我只是不知道该怎么做！任何帮助都是值得的。

Answer 1

.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/

Answer 2

Hii尝试使用此代码-

footer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
}

如何使用Flexbox使页脚停留在底部

2 个答案: