▼
Streaming live at 10am (PST)

How to make bottom of page section auto expand to fill device height?

Design help General
#1

READ ONLY LINK DOES NOT DISPLAY WEB FONTS—SEE INTENDED DESIGN HERE: http://bohldiesel.com/

Read only link: https://preview.webflow.com/preview/bohldiesel?preview=c04db0748fcfdc002836389a8fc45c42

My third and last navigation anchor link section is “Contact”. I only need a little black space beneath the contact form before the copyright section which is the very last page element.

The “Contact” anchor link should bring the page to the top of the “Contact” section just like the anchors for “Testimonials” and “Services” do. The length of the “Contact” section is shorter than the length of the space between the bottom of the header and the bottom of the page…therefore not allowing the anchor to reach it’s designated point.

How do I tell the contact section to grow in height per device height in order to allow the anchor to work properly?

***This is a problem for “Services” anchor on large screens as well…

#4

Hi @CynicalKiddo, Can you try to set the body height to 100%, all your sections set to auto height, except for the Contact section, make that 100% in height. I think then this may work the way you want, can you check that ?

Cheers, Dave

#5

Try so set the “height” of the Contact section to something that is percentage-based or device-based.

Maybe it will help to set the height to “85vh” instead of “auto”.

But I m not sure if that will work also on mobile devices…thats just a guess.

This solution is not dynamic. That would require some javascript in my oppinion.
(e.g. the height is set to auto and if you click on the anchor link, the height gets changed…)

#6

@cyberdave — I’ve tried that before and other variations too; no luck. Thank you for your suggestion.

@Daniel_Schultheiss —I’m restrained to the current capabilities of webflow as I’m not a coder. Thank you again—your solution would work if I did code! It would be super cool if webflow added this functionality at some point.

So, for now, I’ve reverted to cheating by adding empty black space beneath the contact form.

#8

Why? I entered that information directly into the webflow height attribute field?

1 Like
#9

@cyberdave…could you elaborate? Setting all sections to 100% does not fix the issue. There is a way to do this without a workaround or JavaScript?

@Daniel_Schultheiss When I tried this method yesterday and again this morning, there was a tool bar glitch (see attached) and so I thought it was not a function that webflow provided. However, after another few tries, I could insert the spec…but it didn’t solve the problem either…another glitch?

What am I not seeing, dudes?
I an new to playing with CSS…so thanks for continued help!

#10

Yeah, the unit “vh” is not provided on the dropdown menu. You cant choose or change it afterwards through the menue. (only if you want to set it to a standard unit size “px”, “%” or “auto”.

Just type 85vh and press “Enter”. It should work then.

REMEMBER:
85vh equals a percentage based unit. 85 = ~ 85% of the height of the device/browser height.
Setting it higher than that value doesnt make much sense. I can see that in your public link it is set to 560vh. Thats 5.6 times larger than the actual browser height. (maybe I am wrong, but I m not a pro…so).

#11

@Daniel_Schultheiss Yes, yes! (the menu went wonky when I inserted a space between the number and “vh”). Without the space, voila!

And, yes, I learned it was percent based…85 was just shy, but 95 works great. This is def the best work around option…much better than setting “safe” heights that would allowed the action to work on many devices sizes, but sometime made the height much too extreme.

Thank you tons!

2 Likes
#12

Awesome. You’re welcome.

Regards,
Daniel

#13