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

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

It is impossible to add a new element between two existing elements that share the same parent

I'm attempting to place an <hr> tag between the first and second .field-container. Because they have the same parent, I thought using element1.parentNode.insertBefore(element2, ...) would be the solution. However, it is not working as expected a ...

javascripthtml

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

javascriptcssbackground

Difficulty Clicking Links with CSS 3D Transformation

I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over. Question Why is this happening? How can I resolve this so that I can ...

csscss-transforms

Personalize the width of the columns

My SharePoint Online HTML code is as follows: <div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" ...

jqueryhtmlcss

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...

htmlcssangularangular-materialangular-flex-layout

Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here Below is the CSS-Styling + HTML code: .eleme ...

htmlcss

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

Aligning icons side by side using only CSS styling

I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake? Here is the CSS: #social { top:20px; left:30px; height:32px; width:200p ...

htmlcss

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

Every iteration and vertical lines

<?php $arr = range(1,mt_rand(40,120)); ?> <table> <?php foreach ($arr as &$value) { echo '<tr><td>' . $value . '</td></tr>'; } ?> </table> This script generates a sequence of n ...

phphtmlforeach

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?

As a beginner in the world of JavaScript, I understand that the code structure I have used here may not be ideal for real-world applications. However, I am using it to practice my understanding of for loops and fetching JSON data. My main query is whether ...

javascripthtml

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

Positioning the box in the middle of pages

I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...

htmlcss

Tab order in Angular Forms can be adjusted

While constructing a two-column form for simplicity, I utilized two separate divs with flexbox. However, the tabbing behavior is not ideal as it moves down the form rather than moving across when using the tab key to navigate between inputs. I am seeking a ...

htmlangularangular-forms

New post: The vue component that was released lacks CSS (NPM)

For the first time, I am releasing a Vue component on NPM and everything seems to be in order, except for one issue - the CSS is missing. While it functions perfectly when tested locally, after installing the npm package in a test project and importing the ...

cssvue.jsnpm

The element does not have the 'ariaHidden' attribute present

I attempted to use the area-hidden property in a Vue file, but encountered an error. I also experienced a similar issue with the data-dismiss property. Do I need to perform additional setup to utilize the aria-hidden property? <button type="button& ...

htmlvue.jsnuxt.js