Position Fixed With 100% Height

I want use 100% height for MAIN id but when I put it 100% height to main id, creativity class is placed on the main. when use pixel for main in different device its look different.

Solution 1:

If you don't mind IE 8 and below, you can use vh (viewport-height) units:

#main {
    width: 100%;
    height: 100vh;
}

Fiddle

Solution 2:

I think it is because of your position

your #main is in the same level with .creativity

if you want the .main always on the top, just change your .creativity with z-index: 1   AND   your .main with z-index: 2

You never set the .main index, and it always on the bottom layer.

Is it that case you want to?