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

Retrieve information from the API prior to rendering the controller components

Hello there! I am looking to retrieve data from a factory before any of my controllers are loaded. After some research, I discovered that it can be achieved using the resolve function in AngularJS: angular.module('agent', ['ngRoute',&a ...

javascriptangularjsangularjs-directiveangularjs-serviceangularjs-routing

TypeScript is throwing an error when attempting to extend a type

I am attempting to enhance the jQuery unobtrusive validation interface by adding a new method, but for some reason, it is not recognizing the interface at all. The code snippet below is a simple example I tried running in the TypeScript playground as an ex ...

jqueryunobtrusive-validationtypescript1.5

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

javascripthtmltwitter-bootstrap

Start the jQuery animation only when the ajax information differs

I am using setInterval to create a timer that runs every 20 seconds. It utilizes jQuery's ajax function load() to populate the toparticles div with data from another URL on the site. After the data is successfully loaded, it applies a jQuery highlight ...

javascriptajaxjquery

JavaScript event listener 'click' not functioning properly

I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...

javascripthtmlcss

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...

htmlcsscentering

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Access the Code on Fiddle #nav .submenu:before { content:""; position: absolute; width: 0; height: 0; border-bottom: 22px solid #b29600; border-left: 11px solid transparent; border-right: 11px solid transparent; margin: -12px ...

jquerycsshoverpseudo-element

Is there a way to use jQuery to efficiently refresh all values within a table?

Whenever I click the "Update All" button, I want all the CHANTIERS values in each line of the list of SALARIES to be checked and updated according to the value selected in the dropdown list. For example, if I choose the value 1 in the dropdown list and cli ...

jqueryhtml

Delete the span element if the password requirements are satisfied

I am implementing password rules using span elements. I aim to dynamically remove each span that displays a rule once the input conditions are met. Currently, I have succeeded in removing the span related to the minimum length requirement but I am unsure h ...

javascripthtmlangularjsregex

Ways to resolve the issue of undefined $route.current in AngularJS

I have recently started using AngularJS and I am encountering an error "TypeError: $route.current is undefined". Please refer to the code snippet below: var sampleApp = angular.module('sampleApp', ['ngRoute']); sampleApp.config([&ap ...

htmlangularjsangularjs-routing

Exploring the Canvas with Full Element Panning, Minimap Included

Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. ...

javascriptcsshtmlcanvas

Unable to utilize JavaScript from the imported AJAX page XMLHttpRequest

I have implemented a bit of AJAX functionality using XMLhttpRequest, where it replaces a div and functions as expected. However, I am facing difficulty in getting the JavaScript code in the included AJAX page to execute. Is there a way to run JavaScript f ...

javascriptajaxxmlhttprequest

Guide on transferring JSON data to a PHP script by utilizing jQuery's submit function

Hey there, I am just starting to explore JSON in jQuery. I have created an HTML form using JSON data and JavaScript, where the JSON string holds the result. My question is how do I send this string to a PHP file? I am currently using an ajax function to ...

phpjqueryjson

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears. For example, the first bar would appear at 100px, the second at 110px, and so on. I've been experimen ...

csssassbackgroundlinear-gradients

Should one consider building a web application by relying on browser AJAX requests a sound practice?

When developing a standard MVC web application, is it acceptable to rely heavily on ajax calls for rendering content? For instance, looking at Facebook as an example, they dynamically load a majority of their content. Should we emulate this strategy? What ...

javascriptajaxnode.jsrestmodel-view-controller

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

css

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Utilizing webpack with Preact 10.x (nearly identical to React) and TypeScript in the VSCode environment. Following an update from Node version 12 to version 14, there seems to be a problem where *.scss files no longer automatically generate their correspo ...

javascriptreactjstypescriptwebpackpreact

Jquery refuses to load

Hey everyone! I'm currently working on an HTML file for my Angular 2 course. After setting up the dependencies and downloading them with npm, I encountered an error when trying to run the app... The error message I received was: file:///Users/Rocky/A ...

javascriptjqueryangularjsnode.js

What is the method to change between input sources in php?

Imagine this scenario: when a user clicks on a specific button, I want them to be presented with either a dropdown list or an input field. This decision would allow the user to choose an existing item or create a new one. <select name="choose[rowId]"&g ...

javascriptphpsql