Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learning process, I am feeling unsure.

Here is the code I have written:

footer {
  width: 100%;
  background-color: #bdbdbd;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 10%;
}
<footer>
  <br>
  <p style="text-align:center;">
    <a href="workform.html" target="_blank">Work with us</a>
  </p>
</footer>

Any help or guidance on this matter would be greatly appreciated. Thank you in advance.

htmlcssfooter

Answer №1

To keep content at the end of your page without needing positioning, ensure that your content has enough height to trigger a scrollbar for users to scroll to the bottom.

footer {
  background-color: #bdbdbd;
  padding: 15px;
  text-align: center;
}
<div>
  <p>Random content</p>
  
  ... (additional random content)
  
</div>

<footer>
  <a href="workform.html" target="_blank">Work with us</a>
</footer>

Answer №2

To keep the footer at the bottom of the page, you can utilize CSS properties such as position: absolute; for the footer and position: relative; for the body:

body {
  position: relative;
  min-height: 100vh;
}

footer {
  width: 100%;
  background-color: #bdbdbd;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 10%;
}


/* This is just for demonstration purposes */

div {
  min-height: 150vh;
  padding: 10px;
}

body {
  margin: 0;
}
<div>Random content</div>

<footer>
  <br>
  <p style="text-align:center;">
    <a href="workform.html" target="_blank">Work with us</a>
  </p>
</footer>

To prevent overlapping with other elements, make sure to add a margin-bottom equal to the height of the footer to the last element. You can target the last element using the selector body :last-child.

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

Encountering a problem during the conversion of HTML to JSON

I am facing an issue with the content of a specific div on my webpage. <div id="hidLocsJsonForAutoComplete" style="display:none;">[{"id":1,"desc":"Amazon","name":"amazon"},{"id":2,"desc":"Apple Bees","name":"applebees"},{"id":3,"desc":"Babys r Us"," ...

jqueryhtmljson

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

"Reposition all elements contained within a div that have a specific class

I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...

javascripthtmlnode.jsclassnodes

Utilizing a Bootstrap grid system (or an IE-compatible CSS grid) to align elements on the provided

Looking for suggestions on achieving the following layout without using CSS grid, either with Bootstrap or IE compatible CSS grid. On large screens: Head and body stack on the left, with an image on the right covering the height of both. [&mdash ...

htmlcssinternet-explorergridviewbootstrap-4

Tips for updating the content of a DIV element on a separate page

One question that often arises is how to change the content of a div element on a different page within a website. While it is common to use Ajax to dynamically update div content within the same page by fetching data from an external .html file, the proce ...

ajaxhtmlreplace

Users report text-shadow not working in Opera browser

Recently, I incorporated a text block into a section of my webpage that utilizes parallax scrolling. This particular text block has been styled to include a subtle text shadow effect. However, when viewing the page in Opera, I encountered an issue where I ...

htmloperashadowcss

Positioning bar chart columns and text using CSS

My component generates HTML for a simple bar chart, with the height and background color computed within the component. Everything functions correctly, but I am facing an issue where long text causes displacement of the bar above it. Another problem is th ...

htmlcssgraphicstailwind-cssvisualization

Selections made from the dropdown menu will automatically generate additional fields in the

The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead: https://jsfiddle.net/c0ffee/pew9f0oc/1/ My specific issue pertains to this screenshot: https://i.sstatic.net/swLqN.png Upon clicking on the dro ...

htmljquerycss

Navigating with Angular Material and md-nav-bar for efficient routing

Currently, I am delving into Angular and have opted to utilize the Angular Material library for my initial application. After tweaking some basic code borrowed from this source, which I adjusted to suit my requirements, I encountered difficulties with rout ...

javascripthtmlcssangularjsangular-material

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

javascriptjqueryhtmlcss

Floating divs failing to clear properly in Internet Explorer

Encountered a persistent bug that only seems to occur in Internet Explorer. I have set up a jsFiddle to showcase the issue. <div class="container" style="width: 802px;"> <div class="block"></div> <div class="block"></div> ...

htmlcsscross-browser

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

htmlcss

The Impreza theme is experiencing difficulty displaying Font Awesome icons

Recently, I had a client who needed a WordPress website. After working on the project on my own server, I finally completed it and transferred the entire site to the client's main domain at gulugalmarketing.com. Everything was functioning perfectly o ...

htmlcsswordpressfont-awesome

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

I am facing an issue where I need to remove the numeric spinner from only a few selected inputs. By adding the following code snippet to my styles.scss file, I was able to successfully remove the spinner: /* Chrome, Safari, Edge, Opera */ input[matinput]: ...

cssangularangular-material

Standard tag for all JSP pages including doctype declaration and styles

I have multiple .jsp files and a page.tag that contains information about all the .jsp files. I don't want to include doctype, styles, and scripts in every single .jsp file, as it would require changing them individually if any updates are needed. Ins ...

htmljsp

AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels s ...

htmlcssangularjs

The <span> tag creating a surprise gap following a word

Using Angular4, I've come across an odd issue where one of my span elements is adding an extra space to the end of words like this: https://i.stack.imgur.com/H4TD7.png The only CSS properties that are set include font-family, -webkit-font-smoothing, ...

htmlcss