The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

I've been working on creating a footer for my Angular application and here's the code for it:

// HTML
<footer class="footer">
    //  code for footer
</footer>

// LESS
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background-color: #ffffff;
}

.content {
    min-height: 500px;
}

// Application's layout:
<app-header1></app-header1>
    <div class="container content">
        <router-outlet></router-outlet>
    </div>
<app-footer></app-footer>

Initially, everything was fine with the footer on the homepage. However, when switching to different pages, the footer started behaving oddly. It would jump to the middle of the page and stay there while scrolling. I realized that removing bottom: 0; made the footer go back to the bottom, but then returning to the homepage caused it to float in between the content and the bottom.

Here are some screenshots to visually represent the issue:

PAGES with bottom: 0; https://i.stack.imgur.com/gNtdV.png

https://i.stack.imgur.com/vyjDp.png

PAGES with NO bottom: 0; https://i.stack.imgur.com/fqMzu.png

https://i.stack.imgur.com/5SjjJ.png

PAGE with position: fixed; https://i.stack.imgur.com/2I9Ex.png

htmlcssless

Answer №1

In my opinion, it would be beneficial to convert the footer into a div element and position it below all other block elements on your webpage.

Here is what the updated code might look like:

<div class="footer">
        //  code for footer
    </div>

And here is how you could style it in CSS:

.footer {
    position: absolute;
    width: 100%;
    height: fit-content;
    background-color: #ffffff;
}

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

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

htmlcssheight

Troubleshooting CSS Carousel Navigation Problems

{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; ...

htmlcssdjangocarousel

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

Providing an HTML application even in the absence of an internet connection

I am currently developing an application that needs to function offline. I have experimented with the HTML5 manifest feature, which is now considered deprecated, and have also explored using 'Service Workers'. However, my challenge is that the ap ...

phphtml

The JQuery mobile navigation menu effortlessly appears on your screen

I am experiencing an issue with a JQuery mobile navigation that is designed for screens @979 pixels wide. The problem arises when the screen is resized to 979px - the menu pops up fully extended and covers the content of the web page. I suspect that this ...

javascriptjqueryhtmlmobilejquery-mobile-navbar

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

htmlcssresponsive-designmobile-safariiphone-5

Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the slider element: <div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" > <div class="slider__interval" ...

javascriptjqueryhtmlcss

What is the process for printing the CSS stylesheet for PPI::HTML highlight?

PPI::HTML has done an impressive job of formatting the HTML highlighting for my Perl code, similar to the example on CPAN. However, I am facing challenges in making the output usable without the appropriate CSS styles. Unfortunately, I am unsure of how to ...

htmlcssperlppi

Learn how to dynamically clear and update source data in jQuery autocomplete for enhanced functionality

Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, ...

javascriptjqueryhtmlautocompletejquery-ui-autocomplete

IE11 experiencing issues with font loading

I need help troubleshooting why the fonts are not loading properly in the body section of my articles, specifically when viewed in Internet Explorer. Take a look at an example article here: I am fetching from this CSS file: , and I have included the nece ...

htmlcssfontscross-browserinternet-explorer-11

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

javascriptcssreactjssemantic-uisemantic-ui-react

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

htmlcssmobile

Next.js: Customizing the output format of CSS Modules classes

I'm a beginner with NextJS. I'm looking to update the CSS classes prefix + suffix to this new format: <li class="desktop__menu-item--2feEH"></li> <li class="desktop__menu-item--2feEH"></li> <li class ...

cssreactjswebpacknext.js

Issue with Laravel Blade: HTML elements are not being displayed in my blade template file

After implementing WYSIWYG fields in my form, I noticed that the html tags are not being properly rendered upon retrieving the data. The HTML tags still appear in their raw form within the form itself. Attempting solutions found on this thread, I believed ...

phphtmllaravelwysiwyg

Ways to iterate through all elements using xpath

Having recently ventured into the world of xpath and HTML, I realize that I may be overlooking a key concept. In my HTML document, I am aiming to extract all the items listed below (I'm relying on scrapy for my requests; all I need is the correct xpat ...

htmlxpathweb-scraping

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

javascriptjqueryhtml

FlexBox responsive items that are expandable getting cut off

I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with: On Desktop, the items are cut off and not fully visible. On Mobile, half of the items are missin ...

htmlcssreactjsflexboxtailwind-css

tips on encrypting css/js file names

Can the filename of the css/js file be encrypted? I have noticed that when I view the source of the website, the filenames of the css and js files look encrypted like this. <link href="/assets/css/builds/73e15c8a3cf6409214bbf8a742e9b5d41403226617.css" ...

javascripthtmlcssencryption

Preventing jquery from continuing its execution after an event has been successfully handled

I am experiencing an issue with a radio button that triggers a jQuery script upon clicking. The script is supposed to render a form where users can enter a comment. Everything seems to be working fine, the event is detected and the form is rendered, but wh ...

jqueryhtmlajax

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

cssangularjsreactjsresponsive-designvue.js