How do i get the footer to stay at the bottom with flexbox

Question

This is my css that i am using on the base template so other templates will inherit it.

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: there are some django links in it .

{% 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>

i want the footer at the very bottom . i tried using inherit,absolute,fixed,relatve property but that just attaches it to the last line of page or other way around .now the online solutions require me to write all of this from scratch. but i think that it can be solved , i just dont know how!any help is appreciated.

Atikur Rahman · Accepted Answer · 2018-12-07T07:10:25.367

1

.Site {
  display: flex;
  flex-direction: column;
  height: 100%; 
  margin: 0
} 
.Site-content {
  flex: 1 auto;
}

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

Apply this css. check this link http://jsfiddle.net/wilsassam/fpg1aLkd/

edited Dec 07 '18 at 07:10

answered Dec 07 '18 at 06:01

Atikur Rahman

1,043
1
7
14

Basically, give `display: flex` to the parent of `footer` and give `flex-grow: 1` to the top adjacent sibling, ( or to any sibling by which you want to fill up the empty spaces) in your case it may be `
`
– Atikur Rahman Dec 07 '18 at 06:52
u mean giving `display:flex` to the `Site-Content` and `flex grow : 1 ` to what ? – DarkSied Dec 07 '18 at 06:57
it works for all other links but the footer size goes small in the above given template while it st stays good in other templates.. i can add the padding but that just makes footer for other templates larger – DarkSied Dec 07 '18 at 07:24
something is wrong with content height in other templates. – DarkSied Dec 07 '18 at 07:31

score 0 · Answer 2 · answered Dec 07 '18 at 05:41

0

Hii Try This code -

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

answered Dec 07 '18 at 05:41

Hariom Singh

1,420
1
8
21

no sir..it is fixed on screen bottom not page bottom – DarkSied Dec 07 '18 at 05:47

How do i get the footer to stay at the bottom with flexbox

2 Answers2