Footer is stubbornly stuck in the middle of the page, refusing to budge despite the

Question

Footer is stubbornly stuck in the middle of the page, refusing to budge despite the

visit the live site here

Despite setting the body height:100%, my footer continues to get stuck mid-page on certain pages such as about and contact. I have tried specifying the footer height and using position:fixed, position:absolute, and bottom:0, but nothing seems to work. Any suggestions?

Update: Even attempting a "Sticky Footer" does not solve the issue; it causes the footer to be slightly off-center on the page.

body {
    background: #fff;
    font-family: london, Arial, sans-serif;
    height: 100%;
}

#container {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0 120px 60px;
}
#footer {
    position: absolute;
    width: 340px;
    margin: 0 auto;
    bottom: 0;
    height: 120px;
}

html css position css-position

Answer 1

Answer №1

Try adding a 100% height to your container with the code snippet provided below:

http://example.com/code-snippet

html, body {
    background-color:#f7f7f7;
    height:100%;
}
#header {
    position:relative;
    background:#666;
    min-height:50px;
}
#container {
    width: 860px;
    margin: 10px auto;
    height:100%;
}
#container p {
    font:1.8em normal Arial, sans-serif;
}
#footer {
    background-color:#444;
    min-height:60px;
}

<div id="header"></div>
<div id="container">
    <p>Welcome!</p>
</div>
<div id="footer"></div>

Answer 2

Try adding a 100% height to your container with the code snippet provided below:

http://example.com/code-snippet

html, body {
    background-color:#f7f7f7;
    height:100%;
}
#header {
    position:relative;
    background:#666;
    min-height:50px;
}
#container {
    width: 860px;
    margin: 10px auto;
    height:100%;
}
#container p {
    font:1.8em normal Arial, sans-serif;
}
#footer {
    background-color:#444;
    min-height:60px;
}

<div id="header"></div>
<div id="container">
    <p>Welcome!</p>
</div>
<div id="footer"></div>

Footer is stubbornly stuck in the middle of the page, refusing to budge despite the

Answer №1

Similar questions

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

Avoid floating right elements all the way up if there are already elements floating left

Compatibility issues with jQuery observed in Firefox and Internet Explorer 11

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Explore an illustration of a website with a hover effect

Looking for assistance navigating through a website's links using Selenium?

Issue with Next.js app styles persisting on pages after page refresh

The view has no access to $scope but the controller does

Is it possible to apply identical css styles to multiple ids at once?

Running Protractor tests can be frustratingly sluggish and frequently result in timeouts

Divs gracefully appear one after the other in a sequential manner

Swap out the hyperlink text for a dropdown menu when clicked and then revert back

SASS malfunctioning, error messages popping up in command prompt while running gulp serve

CSS - using numbers to create dynamic background images

Creating personalized widths for bootstrap classes with SASS

Aligning text appears fine in a full screen browser, but it can cause inconsistencies in appearance when resizing the window or viewing on a phone, as demonstrated in the

Passing variables in Redirect() without exposing them in the URL; a methodical approach

Adapt the stylesheet for mobile devices using CSS

Showcasing the information stored within my li element, I am able to access and view the data through my console