Ways to ensure the magento footer remains fixed at the bottom of the page

Struggling to get the Magento footer to stay at the bottom of the page?

Check out this link:

This seems to be a common issue with Magento, but there are various solutions available. I've included one here that might be helpful for someone else: .

Unfortunately, the provided solution didn't work in this case.

I attempted to adjust the height and padding of the main-container and footer-container, as well as clearing the float.

The code snippet used is:

html, body {height: 100%;}

#wrapper {min-height: 100%;}

#main-container {overflow:auto;
    padding-bottom: 228px;}  /* must be same height as the footer */

#footer-container {position: relative;
    margin-top: -228px; /* negative value of footer height */
    height: 228px;
    clear:both;} 

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;}

Unfortunately, neither approach worked on this particular page.

If you have any ideas or solutions, please share!


Thanks for all the responses. The issue was resolved by using:

.page{ height: 100vh;}

This CSS property defines the height according to the browser window, effectively pushing the footer down. Hopefully, this tip can assist others facing a similar problem.

Answer №1

If you're looking for a solution to create a sticky footer, I recommend trying out the method outlined here.

Although it may seem complex at first, once you have the specific pixel height (228px in your case), it should function effectively.

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

Divide the text array into pages within an HTML textarea using a loop

I am trying to implement pagination for an array where users can navigate using previous and next buttons or by specifying a position. When the index changes, I want the corresponding value to be displayed. Although I have attempted to achieve this with t ...

What happens to the content in a browser when the window is minimized?

The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window. I prefer the content not to collapse. I have utilized a div that resembles a text ...

How can I change the visibility of certain elements by clicking a button on a website?

I have been working on a login and signup form that initially only asks for the username and password. Once the user clicks on the sign-in button, additional inputs such as first name, last name, date of birth, etc. should be displayed. I attempted to wr ...

Centering SVGs with absolute positioning - Maintaining aspect ratios

Here is the code I am working with: http://jsfiddle.net/uorto4ny/2/ The challenge I'm facing is trying to keep a fluid sized SVG centered on the page while maintaining its proportions. Currently, it works in Chrome, but in IE and Firefox, one side of ...

How to Fix Tags Moving to Bottom when Hovered Due to Limited Space?

Recently, I've been facing an issue with the tags on my website. When I hover over them, a remove icon appears, causing the tags to increase in size. This results in a problem where, if I hover over the rightmost tag and there isn't enough space ...

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

Having trouble positioning items correctly in Bootstrap 4.5?

My attempt to align two elements in HTML using Bootstrap is not yielding the desired outcome. Here is the code I am currently using: <div class="row align-items-center"> <div class="col-auto"> <h6>Alignment Testing</h6> ...

Exporting a web page as a Microsoft Word document is not working properly because

Need assistance with exporting a webpage to Microsoft Word in table format, as the table layout is not displaying correctly and is missing CSS styling. Can someone please help me resolve this issue? ...

How to create a responsive image that appears over a button when hovering in Bootstrap?

My goal is to display an image over a button when hovering. I've tried adding the .img-responsive class in Bootstrap while including the image in the HTML, but it's not working as expected with my current method of loading images. The buttons the ...

Bootstrap: the rows are breaching the boundaries of their parent containers, causing them to overlap with

I'm struggling to create a bootstrap layout similar to the one on Codepen. Everything looks good on the codepen demo: Codepen_bootstrap ...but when I try to view the page locally in my browser (Chrome and Safari), the design becomes distorted and el ...

Text remains unaltered on input focus

When I click on the input field, I expect the label to transform but it doesn't. However, using ".user-input:focus, .user-input:valid" changes the input, indicating that it should work with the label as well. .user-input:focus+.user-label, .user-in ...

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

My goal is to align my navigation bar in the center of the page, ensuring there is a 5-pixel margin on each side of the bar without adjusting the position of any of the tabs

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: black; position: absolute; } li { float: left; border-right: 1px solid #bbb; } li a { display: block; color: white; text-align: center; padding ...

Using JavaScript variables in CSS: a beginner's guide

My website features a typewriter effect, but I want the animation to match the length of the words exactly. I attempted using JavaScript variables in CSS, but unfortunately, it's not functioning properly. Could someone please advise me on how to remed ...

Ways to incorporate line spacing using CSS

Is there a way to adjust the spacing between the drop down boxes in the sidebar so that they align neatly with the questions in my section? select { font-family: 'Courier New', monospace; color: black; font-weight: bold; font-size: 3 ...

What is a way to ensure that hidden elements with display:block do not retain their original space in the DOM?

Here is a specific code snippet I'm working with: https://jsfiddle.net/uyg8tauo/. In this snippet, multiple div elements are initially set to display: none;. My goal is to make them appear by changing the display property to block when the correspondi ...

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

What is the best way to position a div at the end of a row in Bootstrap?

Looking for advice on how to structure this markup: <div class="wrapper"> <div class="row"> <div class="col-md-4"></div> </div> <div class="next-to-div"></div> </div> I'm trying to ...

Is there a way to create a glow effect in CSS that considers the background color?

Exploring ways to create realistic-looking LEDs using HTML and CSS has been a fun challenge. Achieving a glowing effect for each LED would be simple if the color remained constant. However, I aim for the glow to dynamically adjust based on the LED's c ...