How to make div the page height? (not view, but page)

i thought this would be easy, but stumped.

i’m making a modal settings popup, and for the mobile version, i’m just keeping it simple for those with smaller screens. so, since i now want the whole screen to scroll, including the modal, it seems like the background “cover” i can only set to 100 of the viewport, not the actual height of the entire page (i.e. cover everything down to the end of the footer).

i think the secret was in this answer, but that evernote is since gone. seems like the answer starts with setting the body to 100%… but… then what?

please, go to the 2nd page - “my page” - the modal view should be visible. then, if you preview it, click the gear icon to get the modal to show. again, this is only for the mobile view:


Here is my public share link: LINK
(how to access public share link)

Hi Paul (@rps),
It’s hard figuring that out.

The solution is to give every container/div that holds the specific div (yes, even the body) a 100% height. Then it works. :wink:

Does that make sense?

that makes sense, but that’s already what i have. so… not working.

on my site in particular, the element i want to stretch is “modal wrapper,” and then the only element above that is “body.” both are set to 100% height. i just double checked again… not working. any more ideas?

Hi @rps, am I correct that I cannot seem to find the modal wrapper anymore?

sorry, in the process of working on the site, i needed to set it to “hidden.” i’ve set the mobile back to on, as that’s the only one i need this to work for. really hope it can work. maybe it requires some kind of javascript “hack?”

Hi @rps,
As far as I can see, you haven’t given the body a class.

I’ve selected the body in the navigator, and as you can see in the selector field, there’s no class.

when I do apply your Body class, does that change things for you? (i can’t see the live site)

thanks, but i’m pretty sure the body has it’s own special class. as you’ve shown. and, that’s already set up as i showed in the screenshot above. so, no, it doesn’t change anything.

EDIT: this is the live site, and you can see the settings live in it, too, i think:
http://k3dproto.webflow.io/my-page

fyi… i have the “modal wrapper” set to 140% at the moment, to just make sure if the user scrolls the demo site, then maybe they won’t see that the background doesn’t go all the way down to the bottom.

I’ve checked it on mobile (iPhone) on Chrome, works well with 140%, Safari just crops the window a little, and Adblock browser as well. They might work better with 130%.

Does it help if you change the position of the modal-window to be fixed and full?

thanks, but it needs to be 100% of the page. otherwise, it’s just an embarrassing hack. i’m sure the client will not like it.

if it’s fixed, it no longer scrolls.

1 Like

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