CODEWITHSUNDEEP
csshtml
DarkSied
DarkSied

Reputation: 59

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

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.

Upvotes: 0

Views: 118

Answers (2)

Atikur Rahman
Atikur Rahman

Reputation: 1043

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

Upvotes: 1

Hariom Singh
Hariom Singh

Reputation: 1540

Hii Try This code -

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

Upvotes: 0

Related Questions