I am facing a problem on codesandbox where I am trying to add a footer, but the content above it is getting hidden. Can anyone help me figure out how to fix this issue? What mistake could I be making?
The footer component has been commented out in the app.js file. If you scroll to the bottom, you can see the content disappearing when the footer is uncommented.
One crucial issue lies in misusing the position property. The position property is particularly useful when dealing with boxes.
In your styles.css
.App {
font-family: sans-serif;
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
Revise it to:
.App {
font-family: sans-serif;
min-height: 100vh;
}
.footer {
min-height: 2vh;
width: 100%;
text-align: center;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
min-height: 90vh;
}
Explanation: The concept behind this adjustment is to ensure the footer consistently maintains a specific portion of the viewport. By dividing the viewport into ratios, we secure this consistent positioning regardless of content changes. In this case, the div with the className App has a min-height of 100vh, signifying that it occupies at least 100 equal portions of the viewport. Within App, both flex and the footer are allocated minimum slice requirements - flex receives 90 pieces and the footer gets 2. This guarantees the footer remains fixed at the bottom always.
See the updated outcome here
For those in need of a solution for a "Sticky Footer", especially when the content is not lengthy enough to push the footer down naturally, there is a simple trick. By adding a margin-top equal to the height of the footer, you can ensure that the footer stays at the bottom of the page.
html, body {
height: 100%;
margin: 0;
}
.content {
background-color: blue;
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
background-color: yellow;
height: 50px;
margin-top: -50px;
}<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer">Here comes the Footer</footer>
</body>Simply swap out position: absolute; for position: relative;
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
Replace absolute with static for the .footer class.
Using position: absolute for an element can cause it to overlap other elements because:
Absolute positioned elements are taken out of the normal flow and can cover other elements.
To fix the issue, either delete the "absolute" position or include a "relative" position in the code.
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
I am a beginner to React and I have been working on creating a loading/greeting page that automatically navigates to the next page after a few seconds. In React Router v6, there is a useful hook called useNavigate() which allows you to control navigation. ...
<Route path="/users/:userId" component={UserShow}> <Route path="/location/:locationId" component={LocationShow} /> </Route> A message popped up in the console of my Chrome browser: bundle.js:887 Warning: Avoid using both <Rout ...
After entering the URL in the address bar of the virtual machine's browser, a request for an HTML document from my host computer was made. The HTML document, which I had personally written, successfully appeared in the virtual machine's browser. ...
I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...
In the process of creating a timer for a Tenzie game, there is an onClick function that changes the state of isTimerActive from false to true when a user clicks a button. The initial value of tenzie state is also set to false, but once the user completes t ...
Utilizing the DatePicker feature from Material UI v0, I have crafted a distinct component called DateField to showcase the DatePicker. Here is how it looks: render() { return ( <div> <DatePicker onChange={this.onChang ...
I am looking for a JavaScript library that can create 3D geometric shapes and display them within a div. Ideally, I would like the ability to export the shapes as jpg files or similar. Take a look at this example of a 3D cube: 3d cube ...
Currently utilizing Bootstrap version 4.0.0 Check out this example:: https://getbootstrap.com/docs/4.0/examples/pricing/ Is there a way to ensure a button is always at the bottom? Here's the jsfiddle link: https://jsfiddle.net/34shLh1m/ HTML Code: ...
I am currently working on a form with two fields: stationery type and stationery request quantity. The stationery request quantity field only accepts numerical input. The minimum quantity that can be entered in this field depends on the value selected in t ...
I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...
Just starting with algolia and looking for a hit template. Please take a look at the script below for the text/html template needed: <script type="text/html" id="hit-template"> <div class="hit"> <div class="hit-image"> <i ...
Hey everyone, I've recently dived into the world of web design and encountered my first hurdle. I need your expertise to help me solve this problem. How can I modify my JavaScript to close the NAV element by clicking on one of the links or outside t ...
Snippet of Code: HTML Markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Title</title> </head> <body> <div id="intro"> <a href="#" id="showfullsite"></ ...
My app utilizes jQuery mobile, and everything was functioning properly until I recently noticed that two components do not appear as they should. The first issue is with a selection field that used to display a small arrow but now shows an empty gray circ ...
I am encountering some difficulties in making things happen when I click a button. This is where the buttons are declared: public class DoND extends JFrame implements ActionListener { public JButton btnsuit1, btnsuit2, ... , btnsuit26; public static ...
I've implemented code to validate a form field as you input values, changing the border color to red if invalid or green if valid: function FormValidation(){ var fn=document.getElementById("firstName").value; if(fn == ""){ document.ge ...
My website has been live for a few years now, and I've noticed that it's starting to feel outdated. It's been a while since I last worked on it, so I'm not entirely sure what the issue is. I suspect it might be related to either my webp ...
As a beginner in React, I'm attempting to clone and run https://github.com/strangebnb/react-airbnb After cloning the repository, running npm install, and then webpack, I encountered the following errors: ERROR in ./~/react-tap-event-plugin/src/injec ...
How can I prevent the line from intersecting the circle? I want the line to be outside the circle. The background (in this case, of the li tag) will be transparent. #project-wrapper { width: 100%; /* Adjusting the position of the element on the pa ...
I've been struggling to change the color of the text field input when both the error and focused classes are active. Despite trying various styles, I just can't seem to get it right. Can someone help me identify which class I need to target? I&ap ...