Streaming live at 10am (PST)

Responsive footer height


#1

Hi there.

I'd like the height of my footer to be responsive. The scroll stops short of the top of my contact page in some browsers, or if I resize the window. Currently I've set it with a giant chunk of padding, but that's obviously a bandaid solution that won't actually fix the problem.

Here is my public share link: https://preview.webflow.com/preview/mimfoxco?preview=b14b0df32d397caae428f421dcc89f3a


#2

There is not a real link, here is how to correctly share a public share link. :wink:

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#3

Oops, I accidentally cut a bunch off the end. Fixed now.


#4

So what I understand you are asking how to make the Footer and Contact section together take up the whole height of the browser ... correct?


#5

Yep that's right. Even if I had to combine them into one section that would be okay.


#6

Okay, put them in the same section, then just make the section height (type in to Webflow) 100VH. :wink:

Tell me if this helps. :sunglasses:


#7

Thanks Vladimir, it works nicely. It gives a little more height past the bottom of the page than I would like, but it's so much better than it stopping short. It would be good if I knew how to do it without combing the two sections. It's great for this website but when I need a footer for several different pages in the future this may not work.


#8

Hi, had the same problem. I think it was caused by a container in the section on top of the footer. When changing the container by a normal div the gap disappeared.


#9

Hello @mimfox, you can do it with two sections, you would just need a bit more understanding of VH/VW units, learning them is very useful and I suggest you discover more about them ... The reason I just merged the sections and gave the standard 100VH answer was to give a quick and short answer. :wink:


#10

Okay cool, thanks Vladimir.


#11

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