Always keep the footer at the bottom of the viewport

I'm looking to display a footer with the user's name on my sidebar at the bottom of the viewport. I want it to act as a fixed bottom bar, always visible but only within the sidebar.

To achieve this, I have created a function:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;

    $('#footer').css('margin-top', (docHeight - footerTop) + 'px');

    $('#footer').removeClass('invisible');
}

This function is then implemented like so:

$( function () {
    setFooterStyle();
    window.onresize = setFooterStyle;
}

However, because I am using a sidebar, I suspect that the margin-top positioning places the footer below the sidebar rather than at the top of the page. As a result, the footer ends up hidden towards the bottom of the document and requires scrolling to view it.

Can anyone provide insight into what might be causing this issue and how I can ensure that the footer remains at the bottom of the viewport regardless of resizing or scrolling?

javascriptjquerycssbootstrap-4

Answer №1

If you want to ensure your footer stays at the bottom of the viewport no matter what, you're looking for a "Sticky Footer". The key is to create a wrapper div that fills up 100% of the viewport height above the footer and then manipulate the positioning with negative margins on the footer itself. By adding padding to the content below the footer, you can prevent it from being obstructed by the sticky footer.

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Check out this resource for more information on creating a sticky footer design.

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

Change the color of the navbar when scrolling using bootstrap and jquery

Using Bootstrap to design a navigation bar, I have two main goals: I want the navbar to change color when the page is scrolled down by 20%, and then revert back to its original color when scrolling back to the top. When the collapse featu ...

javascriptjqueryhtmlcssbootstrap-4

Clicking is applied to the <tr> element, where there is also a button with an onclick event

How can I prevent the onClick event on a tr element when there is a button inside the tr that also has its own onclick event? <tr key={index} onClick={() => this.getDetailPage(jobsData)}> <td>{serial_num}</td> <td>{jobsData ...

javascripthtmlreactjsjsx

Exploring the power of JQuery's asynchronous promises within a labyrinth of nested

As a newcomer to Node.js and promises (specifically using Q.js), I am attempting to create a web scraper for a site with the following structure: Main Page: contains a list of categories, each with a link leading to a page listing various stores. List of ...

jquerynode.jspromisejquery-deferredq

Starting the selection process using AngularJS and ng-repeat

My challenge is to have a pre-filled option in a select-box using ng-repeat with AngularJS 1.1.5. However, the select box always starts off with nothing selected and an empty option, which I don't want. It seems to be a side effect of not having anyth ...

javascriptangularjs

Tips for adjusting an input box to match the width of a UI-grid cell

In a customizable ui-grid v3.1.0, the text input field doesn't expand to fill the cell when the column is resized by the user (refer to the image provided). https://i.sstatic.net/LRvst.png I attempted to adjust some CSS properties as shown below, bu ...

cssangular-ui-grid

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

javascripthtmltinymce

The orientation of the mesh in relation to its parent entity

Currently tackling a project involving the creation of a 3D Widget for rotating, scaling, and translating a mesh. Facing challenges with positioning the cone used for scaling the parent mesh. Here is the code snippet in question: function generateScaleWid ...

javascriptthree.js

Loading a local CSS file upon opening a tab with a specific URL

When opening a tab to load a local HTML file from an addon (using addon-sdk), the following code is used: tabs.open({ url: self.data.url('index.html'), onReady: myScript }); However, there seems to be no straightforward way to include a CSS ...

javascriptcssfirefox-addonfirefox-addon-sdk

"Adjusting the AJAX call destination based on the current view or page: A step-by-step guide

I am currently conducting tests on a .js script using Qunit. Within my static .html test harness, I have included the .js "code under test" (CUT) along with appropriate markup. The actual testing is happening in another script that is also incorporated in ...

jqueryasp.net-mvcajaxunit-testingqunit

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

I've been attempting to perform a POST request with headers in order to receive a response. The Angular code snippet I'm currently using for this request is shown below: const headers = new HttpHeaders({ 'Content-Type': 't ...

javascriptjqueryangularangular2-services

Create a dynamically updating list using React's TypeScript rendering at regular intervals

My goal is to create a game where objects fall from the top of the screen, and when clicked, they disappear and increase the score. However, I am facing an issue where the items are not visible on the screen. I have implemented the use of setInterval to d ...

javascriptreactjstypescriptsetinterval

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

htmlcsslistvue.js

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

javascriptcssreactjsjsxstyled-components

Extra space within table in Firefox

Experiencing an issue with excess whitespace in a table on Firefox. Visit the live example at The problem can also be seen on this jsFiddle: http://jsfiddle.net/DVbCC/ In Chrome and Safari, rows are neatly arranged with minimal spacing, but Firefox show ...

htmlcssfirefoxhtml-table

"An issue has been identified where the ui.bootstrap.accordion component is not functioning correctly

I struggled to implement the accordion feature from https://angular-ui.github.io/bootstrap/#!#accordion. After countless attempts with bootstrap version 4.0.0, I switched to 3.0.0 and finally achieved the desired results. Version 4 displayed only a clickab ...

angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-4angular-ui

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

I am attempting to change the value of an HTML input field from C# code behind. These inputs are created through a JavaScript loop, so I have not had much success using run at server or assigning values through <%= %>. Below is my script: var mytab ...

javascriptc#jqueryasp.nethtml

jQuery Mobile using the old value instead of the new one

Sending a variable through a link: <a href="foo.php?var=101"> php </a> <a href="foo.php?var=102"> html </a> <a href="foo.php?var=102"> css </a> Upon reaching foo.php: <!-- this part is under data-role="page" !--> ...

phpjqueryjquery-mobile

What is the reason behind child state resolve functions being executed prior to the parent state promises being resolved?

I am currently utilizing ui-router version 0.2.13. According to this page: All resolves on one state will be resolved before moving on to the next state, even if they aren't injected into that child Additionally, all resolves for all the states ...

javascriptangularjsangular-ui-router

Issues with Cross-origin resource sharing (CORS) arise when attempting to delete data using Angular

I am facing an issue with my Angular app (v1.13.15) and Express.js(v4.12.4) backend. Specifically, I have set up a DELETE method in my backend and enabled CORS support for it. However, every time I attempt to use the Angular $http.delete function, I enco ...

jqueryangularjsnode.jsexpresscors

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

htmlcsstwitter-bootstrapdrop-down-menunavbar