Move the footer to the bottom of the page

Is there a way to position my footer at the bottom of the screen and make it extend to the full width in a responsive manner? https://i.sstatic.net/19lSB.jpg

Custom CSS for Footer:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: black;
}

.text{
  color: white;
}

Footer Component in TypeScript:

const Footer = () => (
  <footer className="site-footer">
    <p className='text'> APP </p>
  </footer>
);

export default Footer;
javascripthtmlcssreactjsmaterial-ui

Answer №1

Answer:

<style>

   .site-footer{
      position: fixed; bottom: 0; left: 0; width: 100%;
   }

</style>

Answer №2

Here is a solution that I believe will be effective:

.footer-section{
       left: 0;
       bottom : 0;
       background: #000;
       position: fixed;
       display: block;
    }

If you prefer the footer not to be fixed, you can try this alternative approach:

.footer-section {
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background-color: #000;
}

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

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

javascripthtmlangularjs

The scrolling feature in IE 7 with IE 7 standard does not respond to the jquery scroll event, whereas it functions properly in IE8 and IE

I have included an example below which consists of a terms div that contains some terms and conditions as its content. The checkbox is enabled when the user scrolls to the bottom of the div. However, this functionality seems to be not working properly in I ...

jqueryhtmlinternet-explorer

Smooth polygons in a Three.js model

After implementing the following code: var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; var texture = new THREE.Texture(); var loader = new THREE.ImageLoader( ...

javascriptthree.js

Create an array populated with unclosed HTML tags that need to be rendered

I'm trying to display a simple list, but it seems like React is having trouble rendering unclosed HTML elements that are pushed onto the list. This results in an error: ReferenceError: el is not defined If I use single quotes (') bookingStat ...

javascriptreactjs

Tips for effectively managing loading state within redux toolkit crud operations

Seeking guidance on efficiently managing the loading state in redux-toolkit. Within my slice, I have functionalities to create a post, delete a post, and fetch all posts. It appears that each operation requires handling a loading state. For instance, disp ...

javascriptreactjsreduxredux-toolkitreact-state-management

Mongoose and Next.js: Encountered Runtime Error - Cannot Access Undefined Properties (Token)

For some reason, the Model I defined is not working properly, despite being similar to another one that works without errors. Can anyone help me figure out why? If you need to see a minimal, reproducible example, check it out here. The problematic code: ...

javascriptmongodbmongoosenext.jsmongoose-schema

Guide on importing a client-side script using browserify with module.exports exposed through jadeify

I've successfully created a JavaScript file using a Jade template with the help of browserify, browserify-middleware, and jadeify on the server side in Node. The only thing required to generate the JavaScript file is: app.use('/templates', ...

javascriptexpressrequirejspugbrowserify

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

phpcssbackgroundinvisible

The NPM command fails to execute the Webpack script, yet it successfully runs when manually entered into the terminal

Working on my project with Electron-React-Boilerplate, I encountered an issue while running npm run build-renderer. Despite the script appearing to finish, I receive an error. If I manually enter the code related to the build-renderer script in the termin ...

javascriptnode.jsnpmwebpack

Transform your image using a stunning zoom-in effect

Currently, I am experimenting with a feature for my website where I want images to switch upon hover. While I have successfully achieved the image switch on hover, I am looking to create smooth transitions between the switches, with the second image being ...

htmlcsscss-transitionsstylingcss-transforms

Retrieving POST data from requests in Node.js

My goal is to extract parameters from a POST request and store them in the variable postData using the request module. I found helpful information on handling post requests with Express.js here. Additionally, I came across this useful thread on how to retr ...

javascriptnode.jsexpresshttp-post

Implementing dynamic data binding in JavaScript templates

I've been experimenting with jQuery and templates, and I managed to create a basic template binding system: <script type="text/template" id="Template"> <div>{0}</div> </script> Furthermore... var buffer = ''; v ...

javascriptjqueryjsondata-binding

Sending files asynchronously using Angular and ng-file-upload through a RESTful API

I have a form with multiple file upload fields. Here is the process: User fills out the form User selects the files to upload User clicks submit Now, here is what I would like to achieve: Submit the form to the server and receive an ID in return Uploa ...

javascriptphpangularjsng-file-upload

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

javascripthtmlcss

Unable to dispatch an event from a child component to a parent component in Vue.js

Within my parent component, I retrieve an array of strings from an API and pass it down to the child component. The child component then displays this data as a dropdown list. When an item is selected from the dropdown, I aim to assign it to a specific var ...

javascriptvue.jsvuejs2vue-component

Limit Use of Special Characters in HTML and AngularJS

` ~ ! @ # $ % ^ & * ( ) _ + = { } | [ ] \ : ' ; " < > ? , . / I need to limit the use of special characters and numbers in the input field. To achieve this, I have employed the following pattern: ng-pattern="/^[a-zA-Z ]*$/" This patt ...

htmlangularjs

What is the best approach for consuming a JSON array in AngularJS?

My goal here is to consume the JSON data that I am generating through a Spring Restful WebService. The JSON data looks like this: [ { "userid": 1, "firstName": "kevin", "lastName": "buruk", "email": "<a href="/cdn-cg ...

javascriptjavajsonangularjsspring

My React website fails to show up on the server

Struggling to deploy my create-react-app on a server. I followed the instructions, created a homepage field in package.json, set it to a domain address, and ran npm run build. However, resources online are scarce for what to do next. When I run npm start ...

reactjsnpmserverreact-router

Obtaining material for optimizing a dynamic image

I'm facing a challenge with my responsive image setup. The image is filling the top half of the screen as intended, but I can't seem to get the content underneath it to stay below the image as it resizes. Instead, the content ends up overlapping ...

htmlcssresponsive-design

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading]. This particular ...

javascriptjqueryhtmlcss