♣︎

Full Height Split Screen Panels with Scroll

This CSS-only demo uses viewport units to create full height panels on any size screen. Additionally, the left half is a fixed size, while the right half contains a scrolling panel.

Works in modern browsers and IE9+

Please view the source of this page for HTML markup and CSS.

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.


Scroll

down

to

see

this

panel

move

while

the

left

side

remains

static

...

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

♦︎

This Panel Scrolls

Scroll

down

to

see

this

panel

move

while

the

left

side

remains

static

...

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

♥︎

This Panel Scrolls

Scroll

down

to

see

this

panel

move

while

the

left

side

remains

static

...

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah

blah