How to set footer to bottom even page is half empty?

Question

This is .html file

<!doctype html>
<html lang="en">
<head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>


    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
    <title>{% block title%} {% endblock %}</title>
    <style>

    {% block css %}
    #content-wrap {
            padding-bottom: 2.5rem;
            /* Footer height */
        }
    #footer {
            position: bottom;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
    }

    body {
          margin: 0px;
          min-height: 50%;
          padding: 0px;
          position: absolute;
          width: 100%;
    }
    h1 {
        margin-bottom: 0.5rem;
        margin-right: 8.5rem;
        /* font-style: unset; */
        font-weight: 300;
        color: aliceblue;
        font-family: 'Amatic SC', cursive;
    }
    .py-4 {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
    {% endblock %}
</style>
</head>
<body style="background-color:aliceblue;">
    {% load static %}

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
        STH</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/shop/about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/shop/contact">Contact Us</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="/blog">Our Blog</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/shop/tracker">Track Order</a>
            <a class="dropdown-item" href="/shop/checkout">Checkout</a>
        </div>
      </li>
    </ul>
    
<button type="button" class="btn btn-warning mx-3" onclick='clearCart()' id ='clearCart'>ClearCart</button>

  </div>

    <form method='get' action='/shop/search/' class="form-inline my-2 my-lg-0" >
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
   <button type="button" class="btn btn-dark mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" >


  Cart(<span id="cart">0</span>)
</button>
</nav>
<div id="wrapper" class="wrapper">
    <span id="typed"></span>
</div>


    {% block body %}


    {% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    {% block js %}

    {% endblock %}
    <footer class="footer py-3 bg-dark text-light" id="footer">
        <div class="container">
            <p class="mb-0 text-center">© storestohomes.com</p>
            <p class="mb-0 text-center">
                <a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
                <a href="#">Privacy |</a>
                <a href="#">Terms</a>
            </p>
        </div>
    </footer>
</body >
</html>

Please if someone can show me where I'm wrong. I cannot set the footer to the bottom of the page even when it's half empty.

Is it really necessary to state the same question like 5 times? — 0stone0, Nov 09 '20 at 13:32

score 1 · Answer 1 · answered Nov 09 '20 at 13:50

Here is a very good solution using flex. I wrapped everything in a .main container - the parent container. I also marked all the changes in the css. I wanted to give you a second solution with absolute positioning, but you were already given such a solution.

#content-wrap {
            padding-bottom: 2.5rem;
            /* Footer height */
        }
    #footer {
            /*position: bottom;*/
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
            flex: 0 0 auto; /*add*/
    }

    body {
          margin: 0px;
          min-height: 50%;
          padding: 0px;
          position: absolute;
          width: 100%;
          height: 100vh; /*add*/
    }
    
    
    .main {
        display: flex; /*add*/
        flex-direction: column; /*add*/
        min-height: 100%; /*add*/
    }
    
    .wrapper {
        height: 100%; /*add*/
        flex: 1 0 auto; /*add*/
    }
    
    
    h1 {
        margin-bottom: 0.5rem;
        margin-right: 8.5rem;
        /* font-style: unset; */
        font-weight: 300;
        color: aliceblue;
        font-family: 'Amatic SC', cursive;
    }
    .py-4 {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>


    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">


<body style="background-color:aliceblue;">

<div class="main">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
        STH</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/shop/about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/shop/contact">Contact Us</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="/blog">Our Blog</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/shop/tracker">Track Order</a>
            <a class="dropdown-item" href="/shop/checkout">Checkout</a>
        </div>
      </li>
    </ul>
    
<button type="button" class="btn btn-warning mx-3" onclick='clearCart()' id ='clearCart'>ClearCart</button>

  </div>

    <form method='get' action='/shop/search/' class="form-inline my-2 my-lg-0" >
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
   <button type="button" class="btn btn-dark mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" >


  Cart(<span id="cart">0</span>)
</button>
</nav>
<div id="wrapper" class="wrapper">
    <span id="typed"></span>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <footer class="footer py-3 bg-dark text-light" id="footer">
        <div class="container">
            <p class="mb-0 text-center">© storestohomes.com</p>
            <p class="mb-0 text-center">
                <a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
                <a href="#">Privacy |</a>
                <a href="#">Terms</a>
            </p>
        </div>
    </footer>
    </div>
</body >

score 0 · Answer 2 · answered Nov 09 '20 at 13:26

0

Fix your footer to the bottom or give height 100vh to your body page.

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
  }

answered Nov 09 '20 at 13:26

akhtarvahid

9,445
2
26
29

No improvement still – Vatsal Vohera Nov 09 '20 at 13:28

score 0 · Answer 3 · answered Nov 09 '20 at 13:29

Try the code below. Its quite self explaining.

HTML

<div id="container">
    <div id="header">
        HEADER
    </div>
    <div id="body">
        BODY
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;    /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;            /* Height of the footer */
    background:#6cf;
}

Here are a few links with optional methods to refer to. https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

score 0 · Answer 4 · answered Nov 09 '20 at 13:43

I have altered some CSS in #footer you can see if it helps let me know

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap"
      rel="stylesheet"
    />
    <title>{% block title%} {% endblock %}</title>
    <style>

      {% block css %}
      #content-wrap {
              padding-bottom: 2.5rem;
              /* Footer height */
          }
      #footer {
              position: absolute;

              bottom: 0;
              width: 100%;
              background-color: red;
              color: white;
              text-align: center;
             /* margin-bottom: 0px; */

      }

      body {
            margin: 0px;
            min-height: 100%;
            padding: 0px;

            width: 100%;
      }
      h1 {
          margin-bottom: 0.5rem;
          margin-right: 8.5rem;
          /* font-style: unset; */
          font-weight: 300;
          color: aliceblue;
          font-family: 'Amatic SC', cursive;
      }
      .py-4 {
          padding-bottom: 0.5rem;
          padding-top: 0.5rem;
      }
      {% endblock %}
    </style>
  </head>
  <body style="background-color: aliceblue;">
    {% load static %}

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="/"> STH</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/shop"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/shop/about">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/shop/contact">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/blog">Our Blog</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="/shop/tracker">Track Order</a>
              <a class="dropdown-item" href="/shop/checkout">Checkout</a>
            </div>
          </li>
        </ul>

        <button
          type="button"
          class="btn btn-warning mx-3"
          onclick="clearCart()"
          id="clearCart"
        >
          ClearCart
        </button>
      </div>

      <form
        method="get"
        action="/shop/search/"
        class="form-inline my-2 my-lg-0"
      >
        <input
          class="form-control mr-sm-2"
          type="search"
          placeholder="Search"
          aria-label="Search"
          name="search"
          id="search"
        />
        <button class="btn btn-success my-2 my-sm-0" type="submit">
          Search
        </button>
      </form>
      <button
        type="button"
        class="btn btn-dark mx-2"
        id="popcart"
        data-container="body"
        data-toggle="popover"
        data-placement="bottom"
        data-html="true"
      >
        Cart(<span id="cart">0</span>)
      </button>
    </nav>
    <div id="wrapper" class="wrapper">
      <span id="typed"></span>
    </div>

    {% block body %} {% endblock %}
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    {% block js %} {% endblock %}
    <footer class="footer py-3 bg-dark text-light" id="footer">
      <div class="container">
        <p class="mb-0 text-center">© storestohomes.com</p>
        <p class="mb-0 text-center">
          <a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
          <a href="#">Privacy |</a>
          <a href="#">Terms</a>
        </p>
      </div>
    </footer>
  </body>
</html>

How to set footer to bottom even page is half empty?

4 Answers4