What is the best way to ensure consistent code placement at the bottom of my Django Template using inheritance?

Lately, I've been working on incorporating a footer into my layout.html file that is inherited by all other pages within my Django project.

I am aiming to create a footer that remains fixed at the bottom of every webpage just like how Stack Overflow does it. My approach would ideally involve using inheritance for efficiency.

Below is my proposed code snippet from layout.html:

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 issue I'm facing is that the test_footer doesn't appear below the rest of my body content. Instead, it initially displays at the bottom of the browser window covering the HTML shown by the body, and then moves up as I scroll.

htmlcssdjango

Answer №1

I am facing an issue where the test_footer is not displaying below the rest of my body content. Instead, it appears at the bottom of the browser window, covering the HTML displayed by the body, and then moves up when I scroll.

The reason for this behavior is the use of position: absolute, as explained in detail here: Position Absolute and Bottom 0

To resolve this issue, you can simply place the footer after all other content blocks so that it naturally sits at the bottom of the page without needing any additional CSS.
For instance, your basic template structure could be structured like this:

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

  {% block content %}
    {# other templates will override this block with their content #}
  {% endblock content %}

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

{% endblock body %}
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding the label that is linked to the current DIV or textarea by its "for" property

I am working on a project that involves two elements - a textarea and a div. Each element has a label attached to it using the "for" attribute in HTML. <textarea id="txta_1" class="txta" cols="40" rows="3" onkeyup ...

javascripthtmlfor-loopdom-events

Bootstrap 4 Card Body Spinner Overlay with Flex Alignment

Seeking to center a spinner both vertically and horizontally within a bootstrap 4 card body. Despite trying my-auto, justify-content-center & align-items-center, it seems like I'm missing something. I've double-checked the display types and ...

javascripthtmlcssflexboxbootstrap-4

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Loop through a Django queryset in a template

I've developed a custom filter that generates a queryset of objects. located in: templatetags @register.filter(name = 'create_html_for_deleting_notes') def create_html_for_deleting_notes(task_pk): corresponding_notes = Note.objects ...

djangofilteriteration

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

I am attempting to create a JavaScript function for an HTML button element. However, I have noticed that it causes the page to reload. Strangely, when I use an input with a button type, everything works perfectly. What could be causing this issue and why a ...

javascriptasp.nethtml

The Div elements are not displaying properly in the correct size on the responsive webpage

Looking to create a responsive design for a follow page. Although I've managed to make it work, adding a line at the top of each row is causing layout issues and the Box container is not displaying consistently in size. I attempted to set up a fiddl ...

htmlcssresponsive-designzurb-foundation

Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower. https://www.bootply.com/AcsaaqReAL .navbar-custom { background-color: #333333; border- ...

htmlcsstwitter-bootstrapbootstrap-4

The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be ...

htmlcss

Clicking on a link in HTML with the onclick event

I am looking to create a button that will direct me to a different page. Here is the code snippet I have: <div align="right" ><input type="submit" id="logout" onclick="location.href='/login?dis=yes'" value="Sign Out" ></div>& ...

javascripthtmlonclick

putting a division element above a image carousel

Is there a way to overlay a div tag on top of a slideshow, similar to the one shown in this link? In the example provided, a div with the title "DISCOVER THE JOY OF COOKING" is positioned over a slideshow. Any tips on how I can achieve this effect? ...

htmlcss

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Searching for a jQuery plugin to convert an image to black and white? Look no further! I've explored various options, but none quite fit the bill. What I'm really after is an effect that will revert the image back to color when a specific element ...

jquerycssimage

Join Django with vCenter to display a list of virtual machines

I am facing a challenge in retrieving the list of VMs using a rest API. I have successfully obtained the authentication session, but I am struggling to find the process for getting the VM list. I have been searching for days without any luck. I have store ...

djangorestapivcenter

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

Receiving an inaccurate value from the input with type='number' attribute

There is an input field where users can enter a string, and I need to capture the value entered into it. $("#test").on("change", function(){ console.log($(this).val()); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery ...

javascriptjqueryhtmlgoogle-chrome

The validity check in my form fails, returning false

I have created a form named CookDuty which looks like this: class CookDuty(forms.Form ): # cook = None def __init__(self, *args, **kwargs): cook = kwargs.pop('cook') super(CookDuty, self).__init__(*args, **kwargs) ...

pythondjangodjango-formsdjango-views

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

Before diving in, I want to make it clear that my understanding of ajax is limited. I'm currently working on a small application where I have a load.php file that echoes 3 variables: $loadout[0]; $loadout[1]; $loadout[2]; The PHP file is functioning p ...

javascriptphpjqueryhtmlajax