/    Sign up×
Community /Pin to ProfileBookmark

How to make a box scrollable when it reaches full height?

Copy linkTweet thisAlerts:
Oct 13.2015

Hi guys!

Here’s my situation. I have a fixed position box on my site which floats over my content. (I have a button which toggles its visibility, but that’s beside the point.) It serves as my navigation for mobile. My problem is that this box will be on different devices with different heights and will contain different buttons, so I want a box which will expand to fit this box. When the box reaches the height of the screen, I can’t see what’s at the bottom of the box because I can’t scroll to that content. Adding an overflow to it works, but then I have to set a height. What I want to do is have it be a normal div until it reaches the height of my screen, and then becomes an overflow.

What’s the easiest way to accomplish this?

Thanks!
Multi

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@heikeOct 14.2015 — Jquery?

I cant think about a solution using pure CSS.<br/>
Use jquery to compare the height of the window with the height of the width and based on what result you have, you can toggleClass(overflow-y`) which will look like this:
[CODE]overflow:scroll[/CODE]
Copy linkTweet thisAlerts:
@jedaisoulOct 14.2015 — overflow: auto;
Copy linkTweet thisAlerts:
@DeeppurpleOct 15.2015 — make the containers max-height:100vh, overflow:scroll;
×

Success!

Help @multimediocrity spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...