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

to stick it to bottom of page

- container

- 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.


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:-

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: // Final?

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