Scroll div inside hidden overflow div

Question

Is possible to achieve design I wanted below?

With conditions:-
- container position:absolute to stick it to bottom of page
- container max-height:50%
- body div is scroll-able without fixed height while page is not scroll-able

I want to toggle body div visibility by clicking in header so header div will stick to the bottom of page.

tes

What I've tried:-

.container {
    max-height: 50%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
        // this makes .body div not scrollable
        // when this set to auto, header div will also scrollable
}

.content-body {
    height: 100%;
    overflow: auto;
}

Here's fiddle I created:- https://jsfiddle.net/vwoz8rr5/1/
If this is not possible or there are a better approach, I would like to know.
I would like to provide necessary information if needed. Thank you in advance.

Just updated my answer with a better jsFiddle to give you a demo with scrollable content. (though you have to add the max-height: 50% rule if you want to match your constraints properly, do you want me to create another fiddle with that ?) — daformat
– daformat, Commented Feb 5, 2017 at 11:41
Added another answer with a better Fiddle based on our discussion. Consider accepting this last answer instead of the first one. — daformat
– daformat, Commented Feb 5, 2017 at 12:54

daformat · Accepted Answer · 2017-02-05 13:03:33Z

3

Ok, now that I understand better what you want to achieve, here is a better jsFiddle:
https://jsfiddle.net/jqnxjkr0/ Better version based on your feedback

In this version:

.container has a max height that is set to 50% of the viewport height.
.content-header can have a variable height (e.g. multiple lines).
.content-body will take the rest of the available height.
.content-body can be scrolled when its content is too tall to fit.

If this version works for you, you should accept this answer instead of the first one.

edited Feb 5, 2017 at 13:03

answered Feb 5, 2017 at 12:50

daformat

7865 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:29:30Z

1

Edit: See my other answer for a better fiddle.

Seems like a good job for flexbox, here are a few jsFiddle to give you an example:

https://jsfiddle.net/aw5qt19x/ // Basic flexbox usage
https://jsfiddle.net/aw5qt19x/2/ // Based on your constraints / layout
https://jsfiddle.net/aw5qt19x/4/ // Working demo with js

Finally here is a more thorough demo with scrollable content:
https://jsfiddle.net/aw5qt19x/5/ // Final?

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 5, 2017 at 11:08

daformat

7865 silver badges22 bronze badges

8 Comments

Aldo Ginting Over a year ago

thank you for your answer. i think there's a little misundersanding. What i wanted is the body part to be scrollable while in your fiddle, it's the upper part of the page. i think a little modification will make it work.

Aldo Ginting Over a year ago

also i need container height to be 50%

daformat Over a year ago

I mean, I think the upper part need to be scrollable too right?

daformat Over a year ago

Also, do you need .container to be at max-height: 50% (which means that it can be smaller if the content isn't tall enough) or at 50%, no matter what?

daformat Over a year ago

Here is a version with the container set to 50% of the viewport height (vh) permanently, and everything should be scrollable as intended: jsfiddle.net/aw5qt19x/7

|

Collectives™ on Stack Overflow

Scroll div inside hidden overflow div

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related