CSS Viewport Height (vh) minus Pixels (px)

Need help
1

I’m trying to stretch elements to the entire viewport height minus the footer at the bottom.

I’ve browsed the forums for a while and I think I’m very close.

The solution seems to be to set an HTML with the following code.

< style>
#list {
height: 100vh !important;
}
< /style>

Which successfully stretches the element (element ID = list) to the entire viewport size. Now, I want to subtract a set number of pixels (footer height).

What is the code?

I’ve tried the following:

height: 100vh - 100px !important;

height: (100vh - 100px) !important;

height: calc(100vh - 100px) !important;

height: calc(“100vh - 100px”) !important;

height: calc(~“100vh - 100px”) !important;

As you can see I’m kinda just shooting in the dark based on what I can find online.

Anyone know the right code to put here?

I think the solution might be to get the viewport height in pixels and then calculate with pixels only

2

height: calc(100vh - 100px) !important;

I use it in my apps and even extend the calculation to divide sometimes too

3

Ah this worked, thank you.

When I did it the first time I set to 86px (the size of my footer) and it looked like it didn’t work. But when I set it to a large number like 300px it works. So the px value in the script doesn’t match the px value in the developer, or something…

4

If you are testing on a mobile device is probably the use of the 100vh that is off…the mobile devices viewport and browser window height are different.

When working on mobile, I use the browser plugin to capture on page load the browser height to use instead of 100vh in my CSS…of course there can be issues because of the URL address bar being visible or not depending on scroll and orientation.

Either way, now you know you can do the calculation. Finding the right approach for a mobile device is the challenge usually, plus making adjustments when orientation is changed etc.

5

so I just found out that while this solution stretches the repeating group to fit perfectly, it doesnt function properly.

If the repeating group is hard coded to 500 px, and it stretches to a larger viewport to be 1000px, the data only fills the repeating group up to 500 px and then cuts off, so the remaining 500 is just blank space.

Anyone have a fix for this?

6

This topic was automatically closed after 70 days. New replies are no longer allowed.