Adjustable Footer Size with Minimum Size Constraint

On my webpage, I have a footer that is not fixed in place. Currently, the page's content does not require scrolling, and the footer occupies about 25% of the browser window at full screen on a 1920 x 1080 display. The footer's contents are aligned to the top of the footer while the rest of the footer remains empty but filled with the footer's color.

The setup is very similar to this example (although my page is not created on Wix):

My ideal scenario would be for the empty space in the footer to shrink as the page's content grows, instead of increasing the scrolling distance. I would like it to stop shrinking once it reaches a minimum height, at which point the scrolling distance would start to increase.

My question is:

  • Is this achievable with standard CSS?
  • If not, is there an existing JS library (such as jQuery) that could help achieve this effect?
  • If not, what would be the best approach to manually writing the necessary JavaScript?

Thank you.

javascriptjqueryhtmlcss

Answer №1

Imagine you have the following layout:

<div id="content">
   Content that may expand
</div>
<div id="footer">
   Footer
</div>

In jQuery, you could create a function that triggers whenever content is added to the content div or when the window is resized.

function adjustFooter(){
    $('#footer').height( $(window).height() - $('#content').height() );
}

Thus, whenever there is a change in the content div (new content or window resize), execute the adjustFooter() function.

However, this could result in the footer's height becoming zero. To prevent this, add the following style in your CSS:

#footer{
    min-height: 80px;
}

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

The issue with the sticky menu not functioning properly may be due to the use

Hey there, I'm facing an issue with the Navbar Menu (White Bar) on my website. It is working perfectly fine and sticking to the top as expected. However, the problem arises when I click on the Menu - the Sticky class stops working. Upon investigating, ...

htmlcssmobilenavbarsticky

How do I resolve the issue of Python doubling (" ") to ("" "")?

Here is an example of the code I am using without the website included. from bs4 import BeautifulSoup import requests import csv import random as rd source = requests.get('http://example.com').text file = open('C:/xampp/htdocs/new-site/text ...

pythonhtmlpython-3.xbeautifulsoup

Ways to stop Angular from automatically scrolling to the center of the page

I am facing an issue with my angular 11 application. Whenever I navigate to a specific page, there is an automatic scroll down which I don't want. Please refer to the attachment (gif) and homepage.html below to understand the scenario. https://i.ssta ...

javascriptcssangularbootstrap-4

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

phphtmlcss

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

javascriptnode.jsapiexpressasynchronous

There was an error of "Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor"

I've been diving into cannon.js and encountering the following error: Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor. I've tried numerous solutions but none seem to be working. Here's a snippet of my script: var scene, came ...

javascriptthree.jsgame-physicscannon.js

Utilizing Browserify routes and configuring Webstorm

When building my project using gulp and browserify, I made use of path resolution for easier navigation. By following this guide, I configured browserify as shown below: var b = browserify('./app', {paths: ['./node_modules','./src ...

javascriptnpmwebstormbrowserify

How to use Jquery to elevate table rows to the top

Initially, I saved all my tr elements using a function and then targeted specific trs by clicking on them: // tr = all my stored trs tr.find("input[value='Selecteren']").click(); // This .click() function changes the input value to "Aanvragen" ...

jquerytablerow

Implementing the decrement functionality within an onclick event handler for a variable

Can someone assist me with this issue? I am trying to use a variable ID in HTML to call a function on a JavaScript page. For example: (Minus button not functioning) <button class="minus-button quantity-button button" type="button" name="subtract" onc ...

javascriptjqueryhtmlfunction

Generate a new entry for a singular piece of data within an array

I am working on a matchmaking system where two players of the same level are matched and joined in one array. My goal is to include a second data in the array for players who do not have a match. Example: EntryID: “15”, player: ”testing11”, level: ...

javascriptajaxcodeigniter-3

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

htmlcss

Can I switch between different accounts on Auth0?

While utilizing next-auth for user sign-ins, I've noticed that there isn't a clearly visible option to switch accounts after signing in. Additionally, if users enter incorrect credentials, there doesn't seem to be a way to sign in with a dif ...

javascriptnode.jsreactjsnext.jsnext-auth

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...

javascripthtmljqueryinput

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

In this section, random numbers are generated and converted to strings. These string values are then used in the HTML. $num1 = mt_rand(1, 9); $num2 = mt_rand(1, 9); $sum = $num1 + $num2; $str1 = (string) $num1; $str2 = (string) $num2; The following code ...

javascriptphphtml

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

Encountered an error when migrating to Material ui v4 Failed prop type: Invalid prop component supplied to Field. in Field (created by TextField) This error points to the redux form field component export const TextField = props => ( <Field ...

javascriptreactjsmaterial-uiredux-formreact-forwardref

Leveraging JSON in conjunction with AJAX and Python database operations

I am a beginner in Python and I am attempting to access the database through Python in order to retrieve results in a JSON array using AJAX. When I test it by returning a JSON list and triggering an alert in JavaScript, everything works fine. However, as ...

javascriptpythonjsonajaxdatabase

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

What is the most effective method for displaying a child modal within a map?

Project link: Check out my project here! I have two key files in my project - App.js and PageFive.js. In App.js, there is an array defined as follows: state = { boxes: [ { cbIndex: "cb1", name: "Bob" }, { cbI ...

javascriptreactjsbootstrap-4reactstrap

Does the color of <hr> tags in Bootstrap 5 look different?

Encountering a problem with Bootstrap 5 version where adding background-color to <hr> is not displaying accurately: Comparison using Bootstrap 4: https://i.sstatic.net/QIY0P.png Comparison using Bootstrap 5: https://i.sstatic.net/Drlow.png Despite ...

cssbootstrap-5