Maintaining the footer and bottom section of the webpage

I am facing an issue with the footer on my website . I want the footer to always stay at the bottom of the page, even when I dynamically inject HTML code using JavaScript. The footer displays correctly on the main page , but it does not work as intended on other pages like where it is not positioned at the bottom due to changing dimensions caused by live HTML insertion.

Currently, my footer CSS is defined as follows:

footer {
    clear: both;
    margin-top: -200px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}

In addition to staying at the bottom, I also need the footer to remain centered on the page.

Any ideas or suggestions would be greatly appreciated. Thank you!

javascripthtmlcssweb

Answer №1

For the desired effect, make sure to include position:relative; in your body element

body 
{
  position:relative; 
}

#images
{
  margin-bottom:100px; 
}

Answer №2

The solution is to apply the CSS property fixed to the element

footer {
    clear: both;
    margin-top: -200px;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}

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 it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

Apologies for the unclear question, but here is my query... I recently began using Ajax and encountered an issue with sending XMLHttpRequest in the background. I am facing problems with certain html special characters in the form data, especially the & ...

javascriptajaxpost

Adjust puppeteer window dimensions when running in non-headless mode (not viewport)

Is there a way to adjust the browser window size to match the viewport size in Chrome(ium)? When only setting the viewport, the browser can look awkward if it is not running headfully and I want to visually monitor what's happening within the browser ...

javascriptgoogle-chrometypescripttestingpuppeteer

Secure Access with Skype Bot Verification

Recently, I managed to set up a NodeJS bot to synchronize messages between Discord and Skype chats. Although I am relatively new to Javascript and completely unfamiliar with NodeJS, the existence of a framework called Spype has been quite beneficial. The i ...

javascriptnode.jsskype-botsmicrosoft-skype-bot

Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I&apo ...

cssreactjsuser-interfacematerial-uijsx

The data type 'string[]' cannot be assigned to the data type 'listData[]'

I'm currently developing a flexible component that allows the list view to be utilized by different components. However, the challenge arises from the fact that each component has a different data format. In my project, I'm unable to use type any ...

javascriptangulartypescript

Bone structure template - optimizing list spacing with CSS

Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...

htmlcsslistalignment

Determine the number of objects in a JSON array and compile a new array containing the sum of the

I am working with a JSON array that looks like this: const arrayVal = [{ "DATE": "2020-12-1", "NAME": "JAKE", "TEAM_NO": 2, }, { "DATE": "2020-12-2"`, "NAME" ...

javascriptjqueryarraysjsonreduce

Responsive design parameters

After creating a media query specifically for phones, I realized that I needed one for desktop as well. @media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;} However, when I attempted to add a sim ...

htmlcssmedia-queriestablet

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what ...

cssbootstrap-4

The JavaScript function is designed to only accept whole numbers as input

Whenever I invoke a JavaScript function and pass along 4 parameters, it only functions properly if the fourth parameter consists of integers exclusively. Below is the code snippet for my onchange function: onchange="weekchange(this, <?php echo $i ?> ...

javascriptphp

Troubleshooting Query Param Problems in EmberJS Route Navigation

("ember-cli": "2.2.0-beta.6") A search page on my website allows users to look for two different types of records: Users or Organizations. The URL for this search page is /search and I have implemented query parameters to maintain the state and enable ba ...

javascriptember.js

Enhance your Django website with the powerful jQuery Datatables plugin

I am relatively new to using django and I have integrated jquery datatable plugins into my django application. Currently, these datatables are functioning well with small datasets retrieved from my view. However, I am facing challenges when trying to displ ...

javascriptjquerypythondjangodatatable

Having trouble with the mouse trail code on codepen.io

I am currently attempting to integrate this specific CodePen sample into a Hugo template called Somrat Theme. I'm facing challenges in deciding where to place the HTML file; only the 'no cursor' section should go into style.css, and I need ...

javascripthtmlcss

AngularJS does not allow empty spaces in textarea inputs

I am working on a form that includes a textarea element for users to input descriptions, however it does not allow any empty spaces. Users can only input alphanumeric and numeric characters, but no spaces. <textarea class="form-control" rows="4" maxl ...

javascriptangularjs

I'm having trouble sending a string to a WCF service using jQuery AJAX. What's preventing me from sending strings of numbers?

Something strange is happening with my web service when using jquery ajax - I can only pass strings containing numbers. This was never an issue before as I would always just pass IDs to my wcf service. But now that I'm trying something more complex, I ...

javascriptjqueryajaxweb-serviceswcf

The dependency path in the package.json file contains all the necessary files

I recently developed a JavaScript package and here is the configuration in my package.json: { "name": "packageName", "version": "1.0.0", "description": "Description of the package", " ...

javascriptnpm

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

csstailwind-css

How can we apply a hover effect to combine two rows in a table as one using CSS?

I'm having trouble figuring out how to highlight every two rows in a table as one when hovering over the current row. For example, if I hover on row 2, rows 2 and 3 should be highlighted. Then when I move to row 4, rows 4 and 5 should be highlighted, ...

htmlcss

Add one string to an existing array

I have a component named ContactUpdater that appears in a dialog window. This component is responsible for displaying the injected object and executing a PUT operation on that injected object. The code for the component is shown below: HTML <form [for ...

javascriptangulartypescriptangular6

Send a form without the need to reload the page

I have a form that inserts values into the database successfully. However, each time the values are submitted, the page refreshes. I attempted to find a solution on this website, but it didn't work for me. Can someone please advise me on how to submit ...

javascriptphpjqueryajaxforms