Question 277423 in Html Question posted in
Some basic documentation can be found here.

Html – Using Django Template inheritance, how can I have the same code at the bottom of my page?

I have been trying to add a footer to my layout.html, which is inherited by other pages in my Django project.

I am looking to have a footer which is permanently at the bottom of any webpage like Stack Overflow does. I envisage this should be most efficiently done through inheritance.

My suggestion from layout.html is shown below:

HTML:

{% block body %}
{% endblock %}
<div class="test_footer">
Footer Test
</div>

CSS

.test_footer {
    width: 100%;
    background-color: var(--primary-colour);
    padding: 20px; 
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}

The problem I have is that test_footer does not show beneath the rest of my body content. Instead it shows at the bottom of the browser covering html shown by the body and then moves up when I scroll.

Tags:

2

Answers


  1. 0

    Try this one

    HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .main-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            padding: 20px;
            margin-bottom: -56px;
        }

        .test_footer {
            background-color: var(--primary-colour);
            padding: 15px;
            box-sizing: border-box;
            border: 1px solid #000;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        body::after {
            content: "";
            flex: 1;
        }
    </style>
</head>

<body>

    <div class="container-fluid p-5 bg-primary text-white text-center">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </div>

    <div class="main-container mt-5">
        <div class="row">
            <div class="col-sm-4">
                <h3>Column 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
        </div>
    </div>

    <div class="test_footer">
        Footer Test
    </div>

</body>

</html>
    Login or Signup to reply.
  2. 0

    The problem I have is that test_footer does not show beneath the rest of my body content. Instead it shows at the bottom of the browser covering html shown by the body and then moves up when I scroll.

    position: absolute does that: Position Absolute and Bottom 0

    If you place the footer after any other block that adds content, it will should just be at the bottom of the page without requiring any CSS.
    For example, your base template could look something like this:

    <body>
{% block body %}
  {% block header %}{% endblock header %}

  {% block content %}
    {# all other templates override this block to put their content in here #}
  {% endblock content %}

  {% block footer %}
    <footer class="test_footer">My Footer Stuff</footer>
  {% endblock footer %}

{% endblock body %}
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search