The footer stops short of reaching the very bottom of the page

Question

The footer stops short of reaching the very bottom of the page

My footer is not reaching the bottom of the page as intended. I have shared my code on a JS Fiddle for others to review:

http://jsfiddle.net/q2pd5/

To truly see the issue, visit the actual webpage: or view the full screen result on the JS Fiddle.

Clearly, there is a gap beneath the footer that I am unsure why it exists.

Although I have implemented clearing techniques for floats, the issue persists.

I attempted using a sticky footer solution as recommended in other questions, but that did not solve the problem.

From what I can tell, this issue occurs on all browsers.

html css footer sticky-footer

Answer 1

Answer №1

Here's a little tip for your CSS:

Add the following to your #footer selector:
overflow: hidden

This simple trick is often forgotten, but it can be quite useful. By using overflow: hidden, your div will adjust its vertical size based on its contents.

Answer 2

Here's a little tip for your CSS:

Add the following to your #footer selector:
overflow: hidden

This simple trick is often forgotten, but it can be quite useful. By using overflow: hidden, your div will adjust its vertical size based on its contents.

Answer 3

Answer №2

The floats of the lists in the footer need to be cleared. Check out this resource on how to properly clear them: Learn more here. Use overflow: hidden; on the footer like shown below:


#footer {
    overflow: hidden;
}

Answer 4

The floats of the lists in the footer need to be cleared. Check out this resource on how to properly clear them: Learn more here. Use overflow: hidden; on the footer like shown below:


#footer {
    overflow: hidden;
}

Answer 5

Answer №3

It appears that your footer is experiencing clearance issues. To resolve this, consider using a clearfix technique as demonstrated below:

#footer:before, #footer:after {
    content: "";
    display: table;
}
#footer:after {
    clear: both;
}

#footer {
    zoom:1; /* ie fix */
}

Answer 6

It appears that your footer is experiencing clearance issues. To resolve this, consider using a clearfix technique as demonstrated below:

#footer:before, #footer:after {
    content: "";
    display: table;
}
#footer:after {
    clear: both;
}

#footer {
    zoom:1; /* ie fix */
}

Answer 7

Answer №4

The bottom section of the page is set to have a height of 200 pixels, causing the background image to be cut off. In reality, the bottom section extends all the way down to the bottom of the screen, but the last item in the list cannot be seen due to white text on a white background.

To solve this issue, simply removing the height: 200px rule alone doesn't work; it just cuts off part of the bottom section. You also need to remove the overflow: hidden and then everything displays correctly.

Answer 8

The bottom section of the page is set to have a height of 200 pixels, causing the background image to be cut off. In reality, the bottom section extends all the way down to the bottom of the screen, but the last item in the list cannot be seen due to white text on a white background.

To solve this issue, simply removing the height: 200px rule alone doesn't work; it just cuts off part of the bottom section. You also need to remove the overflow: hidden and then everything displays correctly.

The footer stops short of reaching the very bottom of the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Employing inline styling to give list bullets a unique color compared to the list items

Is there a way to create interconnections in all the HTML code I produce, without needing to use

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

Utilize Bootstrap's empty field validation for various other validation purposes

Ways to Utilize CSS for Substituting Text

Providing data from a javascript xml file upon page initialization

What is the proper method for navigating down a webpage after clicking a hyperlink?

The Navbar-Burger in Bulma is not linking to menu items properly in Vue.js 2

The background image of the div appears above the top menu

Passing PHP Variables to Multiple Pages

What is the best way to eliminate HTML unicode content from the final item in a continuously changing list?

Transform the <span> element into a calendar for selecting dates

Necessary Selection from Dropdown

Utilizing a div element for creating a clipping mask with CSS

What is the process for displaying the save file dialog in Safari?

What is the reason behind H1 tags not requiring a class or ID in CSS?

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Scale first, then drag and drop to fix a faulty registration

Unable to invoke the jQuery function within CakePHP3

changing CSS styles