Aldo Ginting Aldo Ginting - 4 years ago 127
CSS Question

Scroll div inside hidden overflow div

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.

Answer Source

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download