An element that automatically adjusts to the height of the body

Question

An element that automatically adjusts to the height of the body

I have been struggling to make my div fit the body's height and always stay at the bottom when I scroll. Initially, I set it to 100% height but soon realized that this is not the correct solution. While scrolling, I noticed a gap between the bottom of my div and another element disappearing from view.

To address this issue, I attempted to use a jQuery snippet:

$(window).resize(function(){
var pageHeight = $(document).height();
$('#menu').css('height', 'px');
$('#menu').css('height', pageHeight + 'px');
});

Unfortunately, this approach did not work as expected, leaving me unsure of what steps to take next.

javascript jquery html css

Answer 1

Answer №1

Perhaps what you're looking for is this (CSS):

div {
    height: 100vh; // Equal to 100% of the viewport height
}

Answer 2

Perhaps what you're looking for is this (CSS):

div {
    height: 100vh; // Equal to 100% of the viewport height
}

Answer 3

Answer №2

It's strange, but for some reason I decided to set the height of my div like this:

min-height:900;
height: 100%;
max-height:200%;

Surprisingly, it actually worked. I have no idea why. In any case, I no longer require assistance. Thanks to all who offered their help!

Answer 4

It's strange, but for some reason I decided to set the height of my div like this:

min-height:900;
height: 100%;
max-height:200%;

Surprisingly, it actually worked. I have no idea why. In any case, I no longer require assistance. Thanks to all who offered their help!

Answer 5

Answer №3

If you want to adjust the menu height to match the body height, you can use the following code:

$(window).resize(function(){

  $('#menu').height($(document).height());

});

Answer 6

If you want to adjust the menu height to match the body height, you can use the following code:

$(window).resize(function(){

  $('#menu').height($(document).height());

});

An element that automatically adjusts to the height of the body

Answer №1

Answer №2

Answer №3

Similar questions

arrange a collection within an array containing keys as strings

Tips for submitting JSON data to the specified input area with AngularJS

Stripping away AM | PM from date variables

The settimeout function does not seem to function properly within the context of

How to efficiently calculate totals in an HTML table using JavaScript/jQuery

Formatting a datetime string in Angular to display as yyyy-MM-dd HH:mm

Instructions for compiling node-sass within the present directory for specific files

Assign a class to the parent container based on a certain input

Separate Your Navbar with Bootstrap 4 Separators

Ways to access an element with CSS or Xpath by excluding a particular text

Utilize a jQuery ajax request using either the GET or POST method

Guide on using Ajax and spring MVC to dynamically fill a modal form

Ensure Angular JS includes a space or special character after applying a currency filter

What is the best way to link CSS files from libraries that are downloaded using npm?

Is there a way to create a custom column in Tabulator that displays a calculated value for every row?

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

Tap on the image to enlarge

NodeJS: Use setInterval to continuously execute a loop as long as a specific variable remains true

Is there a way to locate and delete an image element with a broken hyperlink?

What are some methods for utilizing the data received through this.props.history?