Streaming live at 10am (PST)

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


#1

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)


Need to hire a real code fixer ASAP
#2

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?


#3

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?


#4

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


#5

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?"


#6

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)


#7

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.


#8

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?


#9

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.


#10

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