Css 如何使用flexbox使页脚保持在底部_Css_Html

Css 如何使用flexbox使页脚保持在底部

css html

Css 如何使用flexbox使页脚保持在底部,css,html,Css,Html,这是我在基础模板上使用的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;

这是我在基础模板上使用的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>

{%load static%}
指数
{%block head%}
{%endblock%}
蒂克
{%if user.u经过身份验证%}
{%else%}
{%endif%}
{%block body block%}
{%endblock%}
&副本2018-Tik

我希望页脚在最底部。我尝试过使用

inherit

、

absolute

、

fixed

、

relatve

属性，但这只是将其附加到页面的最后一行或其他方式。现在在线解决方案要求我从头开始编写所有这些内容。但我认为这是可以解决的，我只是不知道如何解决！非常感谢您的帮助。

我尝试一下这段代码-

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

应用这个css。检查此链接

否，先生..它固定在屏幕底部而不是页面底部基本上，将

display:flex

交给

footer

的父级，并将

flex grow:1

交给顶部相邻的同级（或任何要填充空白的同级）在您的情况下，它可能是

u意味着为

网站内容提供显示：flex
和flex-grow:1什么？它适用于所有其他链接，但页脚大小在上述给定模板中变小，而在其他模板中保持良好。。我可以添加填充，但这只会使其他模板的页脚变大。其他模板中的内容高度有问题。
.Site {
  display: flex;
  flex-direction: column;
  height: 100%; 
  margin: 0
} 
.Site-content {
  flex: 1 auto;
}

footer {
  height: 90px;
  width: 100%;
  background: red;
}