Menu
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
699
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
Mobile Safari – iOS5 and after has strong support for fixed positioning. iOS4 and below simply treats elements as static and scrolls them along with the rest of the page. Android 2.1 and below no fixed positioning. Android 2.2 awkwardly snaps fixed elements back into position once scrolling is complete.
To position an image relative to a page, select the image and from the menu bar below it, select “Fix position on page”. To open the “Image options” sidebar, select the overflow menu (three dot), followed by “All image options”. To learn more about formatting images in Google Docs, see this article in our Help Center.
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))
70
if a parent container contains transform this could happen. try commenting them
-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
