In this jQuery tutorial, you’ll learn how to set the height of a DIV to 100% of its parent. You’ll learn:
- how to set variables and target selectors
- how to get and set div height using height()
- how to target multiple selectors at once
Watch the tutorial below:
Links mentioned in the video:
- Link to the AJAX course mentioned
- My web developer resources page with more code snippets
Here’s the code I used in the video:
If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.
This Post Has 2 Comments
How would I make it say 75% of the height?
I am using a YouTube video as a background header. The issue I have is that a lot of the video is hidden off the page, and this is happening because the section is set to be the height of the screen. Instead of being the height of the screen, I’d like to set the header to be full width, but the height automatically the correct height for the aspect ratio of the YouTube video (which is 1920 x 1080 px), how would I do this?
I see I can make the height a percentage height of the screen, but what I think I need to do is use some CSS (or maybe CSS and jquery) to make the height of the div a percentage of the width of the div.
You could change line 20 to:
var container_height = parseInt($(‘.container’).height()) * .75;
The .75 can, of course, be whatever percentage you want.