position fixed is not working

Question

I have the following html...

<div class="header"></div> <div class="main"></div> <div class="footer"></div> 

And following css...

.header{ position: fixed; background-color: #f00; height: 100px; } .main{ background-color: #ff0; height: 700px; } .footer{ position: fixed; bottom: 0; background-color: #f0f; height: 120px;} 

But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?

+-------------------------------------+ |     header                          |  -> at fixed position (top of window) +-------------------------------------+ |       main                          | |                                     | |                                     | -> scrollable as its contents |                                     |    scroll bar is window scroll bar not of main |                                     | |                                     | +-------------------------------------+ |         footer                      |  -> at fixed position (bottom of window) +-------------------------------------+ 

See this fiddle

Answer 1

My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...

It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.

(It's a popup that goes from scale(0) to scale(1))

Answer 2

if a parent container contains transform this could happen. try commenting them

-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);