Applying a calc() to a section

How To
1

Hey all,

Not sure if its just me or a bug or what?

I don’t like having a full height hero section overflowing the fold - i.e. if you scroll a little there is still some of the hero section.

I appreciate this is due to the header: So to remove this i did a simple calc CSS

Applied a fixed height to the header of 100px
Give the hero section a max height of calc (100vh - 100px) inside the max height meta field

however, I still get an overflow…

Is the above correct, and should work?

Just checked and it is being overridden, but not sure why:

Screenshot_2
Screenshot_2743×304 36.2 KB

Many thanks

Mick

2

As nearly is always the case, it was user error - I added a space between calc and the parenthesis () #facepalm :rofl:

1 Like
3

Thanks for sharing this one @Michael

4

Same here, even when I use correct (I guess) code. I am having a header hight 110px. Then inside a page, I add a section and for that section’s “Hight” I use the: calc(100vh - 110px) --but it doesn’t work. Still just 100vh, no minus 110px… Anybody more familiar with this can help? Thanks!

image
image1920×1040 261 KB

Here is a live example: Home page – LiptovHUB – Coworking Liptovský Mikuláš

5

Hey Kamil,

I just checked your link, but it is not showing a fixed height of 110px in your header (in the height meta box inside the header template). Also, it is not showing the calc in the section on the page. Have you removed it?

Edit - I can see the fixed height on the header - nested on 2 divs down

Ps. I would also put the calc in max-height instead of height.

1 Like
6

Hey! Apologize for the change in code–working on it. Thanks for the tip. I am going to try the max-height.

7

Seems lite that was it. Now it works like magic. Thanks!

1 Like
8

Awesome mate, glad you got it fixed, looks to be start of a nice site too :muscle: :+1:

1 Like
9

Thank you! Yeah, there’s still some learning curve but looks like I’m going to replace Elementor for good;)

1 Like