Struggling to keep the footer anchored at the bottom of the page

When the content on an HTML page is minimal, the footer may end up positioned halfway up the page, creating a blank space below. This can be unappealing, especially on larger screens. Designers are frequently tasked with moving footers to the bottom of the viewport, but accomplishing this isn't always straightforward.

The structure of my HTML looks like this:

<html>
  <body>
    <div class="wrapper">
        ....
    </div>
    <div class="footer" id="cdFooter">
        .......
    </div>   
  </body>
</html>

I attempted to follow advice from the Internet by setting the CSS rules as follows:

html,body {
    position: relative;
    min-height: 100%;
}

.wrapper {
    min-height:100%;
    position: relative;
    overflow:hidden !important;
}
.footer {
    bottom: 0;
    width: 100%;
}

(Additional CSS rules can be found at the URL below, as there's limit for code here.)

Despite implementing these rules, the footer still does not reach the bottom of the browser on large desktop screens. The result can be viewed at the following URL:

Someone suggested adding a rule to the wrapper like margin-bottom: **px, but that did not resolve the issue on my site.

Could someone kindly review my URL and suggest a solution? I prefer a responsive design without using fixed heights to push elements down.

Thank you.

If I use position: absolute, it will override the wrapper. Adding body {height: 100%} also proved ineffective. Can anyone attempt to make edits on my URL?

In my opinion, the key problem lies in making the body height equal to the browser height, similar to how it is defined in html. Hopefully, this approach could solve the issue.

Answer №1

Your footer display and body element height were not clearly defined in your request. To ensure proper placement, please update your CSS code as follows:

body {
    height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Answer №2

In order to fix the position, you need to remove it from the normal flow and make adjustments in the footer section.

position: absolute;

If you want more control options, consider adding:

top:

This will allow you to manage the height of the footer effectively.

One reason for the overlapping issue may be due to the lack of a specified height in your wrapper, causing it to overlap since the height is not defined and starts from the top.

Another approach would be to define absolute positioning on the wrapper as well, using top and bottom properties to regulate the height.

It is advisable to remove the min-height attribute from all properties as it might disrupt other block elements.

min-height: 100%

Give this a try:

.wrapper {
    position: relative;
    overflow: hidden
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

For an example with absolute positioning on both wrapper and footer, check out this link.

Instead of focusing on "body height being 100% of browser height", consider attaching the footer at the bottom regardless of body or browser height. This approach ensures that the footer remains fixed at the bottom regardless of different browser dimensions.

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

Creating a tab component using vanilla javascript

I am facing an issue with my tab component in plain JavaScript. The content displays correctly in debug mode, but after compilation, it does not show up on the browser. Additionally, when I select a tab, the 'activeNav' class is applied to indica ...

Tips for adjusting the position of the second child in my navigation menu using CSS

Struggling with customizing my navigation menu in CSS, I'm seeking assistance. My goal is to have the second child element of the navigation menu on a new line instead of below the first child (refer to the image for clarification). An example of the ...

Clickable tab to collapse a section containing an image and aligned text

When using Bootstrap 3, I have a button that collapses a div containing an image and text. The button alternates between showing a '+ More' and a '- Less' message. However, the alignment of the image is off with the text. Is there a way ...

What is the best method for utilizing an autocomplete plugin to update a div element?

I am seeking assistance regarding implementing an autocomplete feature in a DIV that displays the names, images and ages of other users as they are typed into a field positioned above the DIV. I want this autocomplete functionality to mimic Facebook' ...

Utilize @Html.TextBox helper to include extra GET parameters

I have a webpage that includes a text input field, table, and pager. The text input is used to determine the number of rows displayed in the table per page. Here is the code for the view: @using (Html.BeginForm("Index", "Read", FormMethod.Get)) { ...

Issue with React/Next.js input field rejecting commas

I'm experiencing a problem with an input field in my React application that was developed using Next.js. The issue arises specifically when using an iPad device, where the input field behaves inconsistently when dealing with commas. When using deskto ...

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

PHP distributing empty sheets (possibly for website configuration)

Hey everyone! I've been struggling to set up a profile page on my website for the past week. Whenever I try to include PHP code or echoes in the content pages, I either get blank pages or encounter a 500 server error. My website is structured with a ...

What is the best way to create scrollable content inside a container?

To accommodate more fields within my fixed-position container, I need to increase its height. However, instead of doing this, I believe adding a scroll bar to the container and making its contents scrollable would be a better solution. The challenge now i ...

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

I am attempting to automatically add a page break if the data exceeds 10. I am using mpdf in conjunction with Laravel and Vue. Below is my CSS code: <style> div.breakNow { page-break-inside:avoid; page-break-after:always; } </style> This is t ...

Utilizing Flask to gather information from a leaflet map

I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

Having trouble making SCSS mixins work with CSS variables in NextJS?

My current next.config.js setup looks like this: module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./styles'], ...

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Currently, I'm in the process of developing an analog clock for a project using Angular. My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform prope ...

Troublesome code with Ajax, Jquery, and PHP is causing issues

I've been trying to send an array from php to js using ajax, but for some reason it's not working no matter what I try. I'm convinced it must be a simple fix, but I seem to have exhausted all my options. <!doctype html> <html lang= ...

The Angular factory function was unable to be initialized

I recently started learning how to integrate Angularjs with ROR using this helpful tutorial While working on adding a new function to retrieve all posts from the database, I encountered a problem. The page no longer loads when I run the code and the HTML ...

Loading texts with the same color code via ajax will reveal there are differences among them

I am currently designing a webshop with green as the primary color scheme. Everything is functioning perfectly, but I have noticed that the text within an ajax loaded div appears brighter than it should be. The text that loads traditionally is noticeably d ...

Dynamic element peeks out from behind parent container

When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis an ...