CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here.

http://jsfiddle.net/f54eq3w8/

Here is the HTML:

<div id="container">test</div>
<footer></footer>

And here is the CSS:

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

body{
    height:100%;
    padding:0;
    display:inline-block;
    width:100%;
    min-height:100%;
}

footer{
    position:relative;
    background-color:#003300;
    color:red;
    width:100%;
    height:100px;
    border-top:4px solid #B8B8B8;
}

#container{
    width:1024px;
    margin:auto;
    margin-top:60px;
    min-height:100%;
}
css

Answer №1

Check out the JSFiddle demonstration: DEMO

To ensure the footer stays at the bottom of the page, create an additional div inside the container that matches the height of the footer. Then, apply a negative bottom margin to the container equal to the height of the footer.

HTML:

<div id="container">
    <div class="footer-push">
    </div>
</div>
<footer></footer>

CSS:

html, body {
    background-color: #00FF00;
    height: 100%;
    margin: 0px;
}
#container {
    z-index: 999;
    background-color: #00FF00;
    position: relative;
    width: 1024px;
    margin: 0 auto;
    min-height: 100%;
    margin: 0px auto -104px auto;
}
.footer-push {
    position: relative;
    height: 104px;
}
footer {
    z-index: 99999;
    position: relative;
    height: 100px;
    background-color: #003300;
    width: 100%;
    border-top:4px solid #B8B8B8;
}

Answer №2

Revise your CSS as shown below. It is important to mention that I removed the html styling, which seems to be causing the issues you are experiencing

body{
    height:100%;
    padding:0;
    display:inline-block;
    width:100%;
    min-height:100%;
}

footer{
    position:absolute;
    bottom:0;
    background-color:#003300;
    color:red;
    width:100%;
    height:100px;
    border-top:4px solid #B8B8B8;
}

#container{
    width:1024px;
    margin:auto;
    margin-top:60px;
    min-height:100%;
}

Check out the revised fiddle

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

Using HTML input checkboxes in conjunction with a JavaScript function

After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly fil ...

javascripthtmlcss

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

javascriptjqueryhtmlcss

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

The scroll function within the inner div is malfunctioning on the Firefox browser

Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...

javascriptjqueryhtmlcss

Adjust the width of the table by utilizing the border-collapse property set to collapse

I am completely baffled by this situation. Whenever I adjust the border-width of a table (either dynamically with JavaScript or in Chrome Dev Tools) where border-collapse: collapse; is set, transitioning from a border width of 1px (#1) to a larger value (# ...

htmlcsshtml-tableborder

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

javascripthtmlcss

SVG: organizing objects based on event priority

I am struggling with layering and event handling in an SVG element. Check out the example here: https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.ts app.component.ts import { Component, VERSION } from '@angular/core'; @ ...

cssangularsvg

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

htmlcsstwitter-bootstrap

Links arranged in semicircles along the perimeter of the page

Here is some code that I have created to display two links in circles positioned on the left and right sides of a webpage. [class*="navigation"] .nav-previous, [class*="navigation"] .nav-next { position: fixed; z-index: 999; top: 50%; text-align ...

htmlcss

Modify the scrolling functionality to ensure that fixed elements remain visible even on smaller screens

I am facing an issue with a fixed div on my webpage. When the height of the div exceeds the viewport height of the browser, I am unable to scroll within the div itself as the background scrolls instead (due to the position being fixed). For example: < ...

htmlcsstwitter-bootstrap

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

javascriptjquerycssstylesheet

Table borders not displaying properly in Chrome when cells are hidden

I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this spec ...

htmlcssgoogle-chromehtml-table

"Adjust the orientation of a video and ensure it properly fills the screen with CSS styling

Below is the CSS style being used: video { position: absolute; transform: rotate(90deg); width: 100%; height: 100%; z-index: 4; visibility: visible; } This code snippet demonstrates a video element: <video id="myVideo" ...

htmlcssvideomp4

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

javascriptphphtmlcssajax

Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image. I understand that I will need to use the box-shadow property for this task. However, I am uns ...

htmlcss

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

htmlcssborderborder-radius

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

My jQuery mobile slide out dialog box is experiencing an issue. The first time the slide out occurs, a comment box appears where users can enter comments and then submit them, followed by a "THANK YOU" message. However, when the user closes the dialog box ...

javascriptjqueryhtmlcssjquery-mobile

Position text on the background image without using positioning techniques

I need to center my text precisely on top of my background image without resorting to the use of relative or absolute positioning. Many solutions online rely on using absolute positioning for the text along with a specified top value, but I prefer not to e ...

htmlcsscss-position

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

javascriptjqueryhtmlcssprettyphoto