Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to stretch from the top of the header to the bottom of the footer. I would like this segment to adjust its height dynamically so that it fits the entire browser window regardless of display height when zoomed out.

You can view a JS fiddle example here:

http://jsfiddle.net/Q8JpC/5/

If anyone knows how to achieve this, please share the code on Stack Overflow as a reply since the JSFiddle is just for testing purposes and not for the final implementation.

I have attempted setting the wrapper's height to 

100vh;
, which fills the screen height but does not extend to accommodate additional content beyond the initial viewport.

Thank you in advance for any assistance! Much appreciated.

javascriptjqueryhtmlcss

Answer №1

While I didn't incorporate it into your design, I frequently utilize this method: Take a look at Modern sticky footers

I recommend utilizing HTML5 semantic tags, which are specifically designed to ensure proper semantics instead of relying on classes like header, nav, footer, etc...

EDIT: I made some modifications to your code in this updated fiddle: JSFiddle

Just include:

html {
  position: relative;
  min-height: 100%; }

In addition to that, adjust the body to be positioned absolute rather than fixed and provide a margin to the body element equal to the height of the footer.

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

Using Protractor to extract text from multiple paragraphs

How do I retrieve the values of all paragraphs (p) at once? Below is an example of how my inspect view appears: "Testing sample one." "Testing sample two." And here is a snippet of my code to extract the value of id 'run': browser.findElement ...

javascriptseleniumprotractor

Stylish Material Design Icons

Our website utilizes CSS classes to display icons across various pages. .alert { /* used for "alert" type messages */ background: url(images/alerts.png) no-repeat left top; padding: 5px 0 15px 35px; margin: 0; } Use: <p id="ctl00_ctl00_ContentMessagePa ...

cssmaterial-ui

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Specify the versions of packages in your package.json file

My package.json file contains many dependencies with "*" as the version, which I have learned is not recommended. I want to update them all to their latest versions. Despite using npm-check-updates tool, it indicates that all packages are up-to-date. Can ...

javascriptnode.jsnpmnpm-install

Ajax: setInterval function successfully runs code but does not refresh the HTML output

I have multiple div elements in my code. I want to update the HTML content inside them based on an API request. The updating process works fine, but the HTML content doesn't refresh visually (meaning that even if I receive a new result from the API, t ...

javascriptjqueryajax

React - Issue with Material-UI radio button group not filling button upon clicking

I've been working on an app using React and incorporating Material-UI components. In a specific section of the interface, there are four options that users can toggle between with radio buttons. Despite setting up the rendering correctly, I encountere ...

javascriptreactjsradio-buttonmaterial-uiradio-group

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

show various commands and outcomes of the getElementsByClassName() function

Can someone help me figure out how to use the "getElementsByClassName() Method" in JavaScript to change or display different colors? I am trying to change the background color to blue for the class "ex" and red for the class "example", but it's not wo ...

javascriptjquerynode.jsvue.js

Neglect variables that have not been declared (TypeScript)

Currently, I am working on developing a WebExtension using TypeScript that will be later compiled into JavaScript. This extension relies on one of the browser APIs offered by Firefox, specifically the extension API. An example of this is my use of the get ...

javascripttypescriptfirefox-addon-webextensions

The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the ratin ...

javascriptcssvue.jsvuetify.js

Press anywhere on the screen to conceal the AngularJS element

Attempting to create a toggle effect using 2 ng-click functions. One is bound to a button, the other to the body tag. The goal is for my content to show when the button is clicked and hide when anywhere on the body is clicked. However, it seems that Angul ...

javascriptangularjs

What could be the reason for my failing express test?

I'm in the process of configuring a server using Node/Express and I want to write ES6 code, so I've incorporated babel into my setup. Currently, the server is operational, and I can successfully make the necessary requests. However, I am facing ...

javascriptnode.jsexpressmocha.jsbabeljs

The model property consistently receives a false value from a checkbox, even when it is checked. The data is retrieved in JSON format from an

After submitting a form, the following code will be triggered: $.ajax({ url: '/Company/CheckError', type: 'POST', data: JSON.stringify($(this).serializeObject()), dataType: 'json', proc ...

jsonasp.net-mvc-3jquery

Pressing the ENTER key does not submit the text box data in Rails/Bootstrap, but clicking the SUBMIT button does

I need assistance with my Rails 4 and Bootstrap 3 project. I have implemented an email address field on my page (localhost:3000) where users can enter their email and click the SUBMIT button to send it to the MongoDB database. However, pressing the ENTER k ...

javascriptjqueryruby-on-railsmongodbtwitter-bootstrap

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

I created these custom cards using a combination of HTML, CSS, and JavaScript. However, I've noticed that the height transition animation is not as smooth as I'd like it to be, especially on certain pages. Is there a way to achieve this animation ...

javascriptjqueryhtmlcss

Combining 1 pixel borders to create a bolder border effect

How can I prevent the border from becoming 2 pixels when I have overlapping (touching) divs? I thought about putting borders on only 2 sides, but then one edge of the div would be without a border. By the way, I am utilizing jQuery Masonry. ...

htmlcssborderjquery-masonry

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Flask-SocketIO: Transmitting data between nodes using Redis adapter

When integrating SocketIO into an application running behind a node-balancer, the documentation recommends using SocketIO-Redis to facilitate event passing between nodes: const io = require('socket.io')(3000); const redis = require('socket.i ...

javascriptnode.jsredissocket.ioflask-socketio

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

javascripthtmliphone

"Exploring the dynamic features of jQuery's mobile listview and

As I work on creating a mobile app using jQuery Mobile, I find myself facing some challenges. Despite my efforts and attempts at different methods, I have not been successful in achieving the desired functionality. Specifically, I am trying to implement a ...

javascriptjqueryjquery-mobilejquery-mobile-listviewjquery-mobile-panel