Create a div that is positioned absolutely on the page and spans the entire height of the

Question

Create a div that is positioned absolutely on the page and spans the entire height of the

I have a position: absolute div that I need to be tall enough to reach the bottom of the page when scrolling all the way down. Essentially, it should span the entire height of the document page, not just the window.

I've discovered that using viewport height (vh) won't work in this case because it only stretches elements to the full height of the window.

Check out the updated Fiddle for reference: https://jsfiddle.net/jygrinberg/qsyLqns7/4/

If needed, I'm open to solutions involving JavaScript or jQuery to achieve the desired effect.

UPDATE: Keep in mind that the content on the page might exceed the content within the div itself (I made adjustments to the Fiddle to reflect this).

jquery css height absolute

Answer 1

Answer №1

body {
  background: #5ae;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #5ae;
}

If the above solution does not resolve the issue, consider removing the line bottom: 0.

Answer 2

body {
  background: #5ae;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #5ae;
}

If the above solution does not resolve the issue, consider removing the line bottom: 0.

Create a div that is positioned absolutely on the page and spans the entire height of the

Answer №1

Similar questions

What is the process for choosing form elements in JQuery by referencing an HTML table?

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

Encountering a Rails 500 server error when making an Ajax request to a form_for partial

Troubleshooting Problem with Bootstrap 4 Navigation Drop-Down Menu

Using jQuery to run code when a key is pressed and returning it to its original state upon release

Are you in favor of side-to-side scrolling?

Deactivate the form fields using Ajax

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

Displaying numbers as characters in AngularJS: Use $index variable

Designing Buttons and Titles for the Login Page

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

Hide the cursor when the text box is in focus

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Problem encountered when attempting to use 'delete' as a property name

Is there a way to create a 100% height effect using divs instead of tables exclusively with CSS?

Unexpected arrows are being added to the dropdown menus in a responsive Twitter Bootstrap menu

Utilizing Jquery's .GET method to retrieve and handle JSON data

Setting the height of a parent element in AngularJS when using ng-repeat

There seems to be an issue with Ajax functionality within the WordPress admin

Learn how to utilize ng-class to assign an ID selector to HTML elements