Achieving full content height with sticky footer

Question

Achieving full content height with sticky footer

Revise

I have made updates to a JSFiddle demo for users to test out. @Aspiring Aqib has offered a working solution using javascript, but CSS solutions are still encouraged.

Original Request

I successfully implemented a sticky footer following the guidelines on this website. The footer is functioning correctly, but I am facing difficulty in creating a content div .content that fits perfectly between the header and the footer.

This is what I have so far (.content highlighted in yellow):

But I can't achieve this (.content contained precisely between the header and the footer):

You can view the updated demo here.

Any suggestions on how to make this possible?

javascript jquery css

Answer 1

Answer №1

text is the identifier for that particular element. Eliminate the min-height and height attributes from the .wrapper container. Instead, implement the following code:

.content {
    min-height:85%; // <--- 85% would be more suitable.
    height:auto !important;
}

Answer 2

text is the identifier for that particular element. Eliminate the min-height and height attributes from the .wrapper container. Instead, implement the following code:

.content {
    min-height:85%; // <--- 85% would be more suitable.
    height:auto !important;
}

Answer 3

Answer №2

Did you remember to define the height of your content section? Make sure it includes:

.content {
  height: 85%
}

You can view an example here:

Answer 4

Did you remember to define the height of your content section? Make sure it includes:

.content {
  height: 85%
}

You can view an example here:

Achieving full content height with sticky footer

Revise

Original Request

Answer №1

Answer №2

Similar questions

Basic HTML Audio Player Featuring Several Customizable Variables

When the Ajax done callback is not a function, it does not wait as expected

Calculate the sum of a specific column in an HTML table using JavaScript after

Use Vue.js class bindings to create blank spaces in between CSS classes

the live binding feature fails to function properly once an append operation is executed

Troubleshooting issue with React mapping an array of items in a modal window

Implementing Django AJAX form submission: extracting a targeted model field from the form

AngularJS: dependent dropdown menus

Attempting to divide the main page into quadrants

"Exploring the Dynamic Duo: Ajax_JQUERY and the Power of

Showcasing a JSON attribute in the title using AngularJS

What is the way to modify the contents of a div using ajax?

Retrieving data from a nested array within an array of objects using JavaScript

Handling multiple render calls and rerenders in React function components with setTimeout (best practice for firing multiple times)

Using Angular to populate textboxes with SQL data

How can the dependencies object be extracted from the package.json file in an Angular project?

Utilizing the Twitter API with Next.js to automate tweets even when the website is not actively engaged

Using React to map and filter nested arrays while also removing duplicates

Choose the element before and add a style effect with CSS

Utilize express.static to showcase and fetch HTML content before serving JavaScript files