Documentation on using calc()

Support
#1

I am trying to create a column which covers 100% of the view less 100px header. To do this i was going to use the calc() option for the height of the column i.e calc(100vh-100px) but this doesn’t seem to work. 100vh works but is obviously too heigh by 100px (the height of the header)

do you have any documentation on using the calc() option to set either a column or div height

#2

Hi @The_Capture_Factory,

Can you please share any URL where you have implemented it? So we can investigate and suggest what exactly happening at your end.

Thanks

#3

This is the page. The column which contains the slide container has its height set to calc(100vh-100px) . The header bar is set to 100px

https://manifoldvalleyshow.co.uk/

#4

Hey @The_Capture_Factory,

We don’t have any documentation for using calc but you can check this as reference:

Hope that helps.

1 Like
#5

Hey,
you need to put whitespaces between around the operator (-) like this:

calc(100vh - 100px)

Mozilla Documentation:

  • The + and - operators must be surrounded by whitespace . For instance, calc(50% -8px) will be parsed as “a percentage followed by a negative length” — which is an invalid expression — while calc(50% - 8px) is “a percentage followed by a subtraction operator and a length”. Likewise, calc(8px + -50%) is treated as “a length followed by an addition operator and a negative percentage”.
2 Likes
#6

Hey @sparko,

Thanks for chiming in, we really appreciate your time and effort.

Cheers!

1 Like
#7

Fantastic, thats a great help many thanks. So simple in the end. :slight_smile:

#8

Thanks for this. Can i suggest you put these links in the documentation section .

Many thanks

1 Like
#9

Hi @The_Capture_Factory,

We will surely consider your suggestion of adding this to our documentation.

Thanks

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.