Tips for placing the footer at the very bottom of your webpage

After attempting to place the footer at the bottom, I encountered some strange behavior. I am using mui framework.

I decided to create a simple example page to illustrate how the footer should be positioned.

The code in app.js is as follows:

<>
<Header />
      <Divider />
      <Container>
        <Routes>
 <Route path='/main' element={<IndexMain />} />
        </Routes>
      </Container>
      <Footer />
<>

You can find the footer code here

The code for the example page is shown in the picture below:

import React from 'react'

function IndexMain() {
  return (
    <div>Index</div>
  )
}

export default IndexMain

Can anyone help me figure out what I'm doing wrong?

Answer №1

Here are two simple ways to adjust the footer placement:

Method 1: Utilizing margin-top auto

.content{
      min-height: calc(100vh - 100px) /* subtracting header and footer widths */
    }
    .footer {
      margin-top: 0; /* utilizing available space */
      margin-bottom: -10px;      /* eliminating bottom space */
      padding-bottom: 5px;
      height: 100px;            /* calculating height with limited content */
}

Method 2: Using absolute positioning

.page-container {
      position: relative;
      min-height: 100vh;
    }
    
    .content-wrap {
      padding-bottom: 2.5rem;    /* Footer height */
    }
    
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 2.5rem;            /* Footer height */
}

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

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

Using jQuery to trigger a click event on an image and display a hidden div

Currently, I am working on creating an image slice show to showcase various product images. The idea is to have smaller thumbnails that when clicked, will display a larger image in a different section. The default view will be the big image of img1. In a ...

How can I prevent the 'eslint(react-hooks/exhaustive-deps)' error from occurring on a custom React Hook that uses useCallback?

Here is a custom React Hook designed to work with the IntersectionObserver: import { useCallback, useRef, useState } from 'react'; type IntersectionObserverResult = [(node: Element | null) => void, IntersectionObserverEntry?]; function useIn ...

Once expo-cli has been installed successfully, the system does not recognize 'expo' as a valid internal or external command

After installing yarn with the command conda install -c conda-forge yarn, I proceeded to install expo-cli using yarn with the command yarn global add expo-cli. However, even after a successful installation, when I tried to use expo init, I received an erro ...

In HTML, adjust column widths for multiple tables according to the widest column present in any of them

With Python, I am creating an HTML page that contains multiple tables with the same number of columns, all holding the same type of data. While the generated page is functional, I would like to improve readability by ensuring that all tables have the same ...

I am unable to alter the value of the input using React hooks

I'm relatively new to React and Hooks, and I'm attempting to create a contact form using hooks. I am facing an issue where I cannot update the values in the input fields or type anything, and the onChange() function is not triggering. There are ...

What is the method to change the background color of a selected FormControlLabel in Material UI?

Is there a way in Material UI to change the background color of the checked radio button in a RadioGroup to a different color? I couldn't find any information about this in the documentation. <FormControlLabel key={key} value={value} control= ...

Customizing the size of an SVG shape using CSS properties

I am having trouble adjusting the width of the icon to 100% of the SVG container. This is what I've encountered: And here is the code for the SVG icon <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w ...

A guide to fetching data from mongoDB ATLAS and showing it in a React application

I am a beginner in the MERN stack and currently working on a project that involves collecting driver information from users and displaying it back to them in a table format. I have successfully connected to MongoDB Atlas and can input data through the fr ...

What is the procedure for eliminating the underline located at the bottom of the table?

Can anyone please assist me with removing the underlines at the end of the table? I find it quite unattractive and can't seem to figure out how to remove it. https://i.sstatic.net/stvHt.png https://i.sstatic.net/YYbrX.png Below is the code snippet ...

Utilizing the Redux Connect HOC's wrapped component type in React.RefObject without the need for re-importing

My current setup involves a simple component that is wrapped with react-redux and has a ref with forwardRef: true, demonstrated below: // Button.tsx class Button extends React.Component { // ... } // ... export default connect(mapStateToProps, null, n ...

Controlling the maximum number of components displayed on each row in a loop or map using React

I'm having some trouble with this seemingly simple task and could use some guidance. Any suggestions would be greatly appreciated. Thank you. My Current Situation Currently, I am working with React.js and have an array containing 20 elements. What ...

Is there a way to enlarge the icon when I hover over the text using framer motion combined with material ui?

Whenever I try to hover over the text, it only scales the icon. It doesn't seem to work when I attempt to hover over it. <ListItem sx={{ fontSize: '14px' }}> <motion.div style={{ display: 'flex', alignItems: 'cent ...

Enhance the elastic layout to ensure full compatibility with Internet Explorer

My elastic layout functions perfectly in Chrome and other major browsers, except for IE which seems to be ignoring the @media query. http://jsfiddle.net/U2W72/17/embedded/result/ * {margin: 0px; padding 0px'} .thumb { float: left; width:16. ...

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem. Your assistance is greatly appreciated, João var inputs = Array.prototype.slice.call(document.querySele ...

Load css-background-images before executing jquery transitions in Sencha Touch for optimal performance

While working on my Sencha Touch app, I implemented a jQuery animation that transitions background images using CSS. The issue I encountered is that the transition to the next image only happens smoothly after all the images have been fully loaded once. Th ...

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Is there a way to change the visibility of a div on a different page when a button or link is clicked? For example, I have a button on the "main.html" page that, when clicked, should display a hidden div on the "header.html" page. How can I achieve this? ...

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...