Footer remains fixed at the bottom, extends below the page

Looking for a way to keep the footer at the bottom of the page and automatically center the content between the header and footer.

I have tried following this technique:

However, my footer ends up appearing too far below, creating a large gap between sections.

Website in question: Stingrayimages.ca

Update: I did manage to get the footer to stick to the bottom, but it isn't aligning perfectly with the edge of the page, leaving a slight scrolling issue. Additionally, resizing the window causes the footer to overlap with the content.

Struggling to keep the content div centered without disrupting the layout further.

htmlcss

Answer №1

Make sure your container div properly encloses the Head div. It seems like you may have confused Ryan's head section with the typical header of a webpage, when in reality it is referring to the head element in the HTML example. The empty space at the bottom is probably the same height as your head div.

When implementing a sticky footer, keep in mind that the container should contain all body content except for the footer.

Answer №2

If you're following the same method as the provided link, it seems like you're overlooking the positioning of the footer.

Here's how the structure looks with the example you shared:

<style type="text/css">
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* Ensure the bottom margin is negative of the footer's height */
}
.footer, .push {
    height: 142px; /* Make sure .push has the same height as .footer */
}
</style>
<div class="wrapper">
  <div class="header"></div>
  <div class="push"></div>
</div>
<div class="footer"></div>

However, I prefer a setup like this:

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

div#container {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%; /* For IE6 compatibility: min-height*/
    min-height: 100%;
}

div#header {

}

div#content {
    padding: 1em 1em 5em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}
</style>
<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

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

"JavaScript code for creating a dynamic switching effect in HTML

I currently have 4 divs on my webpage that can be hidden or shown using JavaScript when clicking the menu at the top of the page. Here is my current script: <script type="text/javascript"> function showHide(d) { var onediv = document.get ...

javascriptjqueryhtml

What is the best way to delete a jQuery.bind event handler that has been created for an event

I have a div and I need to assign two scroll functions to it, but I also want to remove one of them after a certain condition is met. <div id="div1" class="mydivs"> something </div> <div id="div2">Some crap here</div> <script&g ...

javascriptjqueryhtmlajax

Deactivate a specific button within a row on a Primeng table by clicking on it

I'm trying to modify my primeng table so that each row has a button, and when I click on a button, only that specific button should be disabled. However, in my current code, all buttons are getting disabled with a single click. Can someone please help ...

htmlangulareventsprimengprimeng-table

Bootstrap's alignment of items is not functioning as anticipated

For my simple webpage, I am using Bootstrap 4 to add a header and footer. However, I am facing an issue where the footer is not displaying at the end of the page. Below is the HTML code I am using. Can anyone please guide me on what to do? html, body ...

htmlcsstwitter-bootstrapbootstrap-4

The Javascript file seems to be unable to recognize the reference to an Angular directive

When working on my project, I encountered an issue with my EventController.js not recognizing the reference to ng-app="eventsApp" from app.js. I followed a tutorial on Pluralsight. Even though it works for the instructor, I keep seeing {{event.name}} inst ...

javascripthtmlangularjs

Tips for preserving HTML content in an XML file with Linq to XML

I have been experimenting with Linq to XML in order to save and retrieve HTML content between an XML file and a Windows Forms application. However, when the HTML is saved to the XML file, the tags get encoded and it doesn't retain its original form. ...

c#htmlxmllinq-to-xml

Incorporating RFID reader functionality into a website

I am currently facing an issue with integrating an RFID card reader into a web page. After some research, it seems that the solution involves creating an ActiveX component and using JavaScript. My question is, how can we go about building an ActiveX compo ...

javascriptactivexhtmlsmartcardrfid

Achieving vertical alignment of text next to an image using a skeleton grid

Does anyone know how to align the images vertically with the text on the "Board of Advisors" tab on THIS PAGE? Here is the shortened HTML code: <div class="four columns alpha"><img class="ImageBorder" src="LINK" alt="" /></div> <div ...

htmlcssimagegridvertical-alignment

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...

htmlcss

Discover the concealed_elem annotations through the power of JavaScript

As I work on my new website, I am struggling with narrowing down the web code. I came across a solution that seems fitting for what I need, but unfortunately, I can't seem to make it work: I attempted the non-jQuery solution, however, I must be missi ...

javascripthtmlgetelementsbyclassname

Leverage the functionality of Typo3 Powermail to automatically input form values from one page to another

I am currently developing a website with a simple form that includes an input field for entering an email address and a submit button in the footer. Clicking the button directs users to a contact page featuring a Powermail form, where the input field value ...

htmlformstypo3powermail

Using PHP and Bootstrap to input data inside a modal

I am working on a page that has a form located here: https://jsfiddle.net/5tzg8kzm/9/ <body> <h1>&nbsp;</h1> <!-- Page Content --> <div class="container"> <!-- Trigger the modal with a button --> ...

phpjqueryhtmlforms

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

javascriptjqueryhtml

What is the best way to generate a dynamic preview (including image and description) for a shared URL on various social media platforms, Gmail, and Skype using React JS?

We are currently working on a web app using React JS. Our goal is to have an image and a description show up when the link is shared on social media platforms as well as Skype. Currently, when the URL link gets shared, it only displays the URL itself lik ...

htmlreactjs

Struggling to eliminate the underlines from an HTML hyperlink

Can someone help me figure out how to remove the annoying underline link that pops up when hovering over an a element in HTML? I attempted adding a style="text-decoration: none" attribute to the a link, but the underline persists when I hover over the text ...

htmlcss

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. https://i.sstatic.net/rz3r3.jpg Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } U ...

htmlcss

Tips for removing CSS and Javascript code from a website's source code

After implementing the Slicknav Menu plugin on my website, I noticed that a portion of the plugin's CSS and script code is visible when inspecting the source code of the main page: <head> ... <style id='slicknavcss-inline-css&apo ...

javascriptcsswordpresshead

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

javascriptjqueryhtmlajax

Is $timeout considered a questionable hack in Angular.js development practices?

Here's a question for you: I recently encountered a situation where I needed to edit the DOM on a Leaflet Map in order to manipulate the appearance of the legend. To workaround an issue where the map wasn't generating fast enough to access the n ...

javascripthtmlangularjstimeout

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable