固定的位置不起作用

Question

我有以下的HTML ...

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

并关注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;}

但为什么页眉和页脚没有修复,我做错了什么？我只希望"main"可以滚动,"header"和"footer"处于固定位置.怎么做？

+-------------------------------------+
|     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)
+-------------------------------------+

看到这个小提琴

Answer 1

如果父容器包含转换，则可能会发生这种情况。尝试评论他们

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

Answer 2

你需要明确地给页眉和页脚提供宽度

width: 100%;

工作小提琴

如果您希望中间部分不被隐藏,那么给它position: absolute;width: 100%;并设置top and bottom属性(与页眉和页脚高度相关)并给出父元素position: relative.(当然,删除height: 700px;.)并使其可滚动,给overflow: auto.

Answer 3

仔细检查您是否未启用backface-visibility任何包含元素,因为这会破坏position: fixed.对我来说,我使用的是CSS3动画库......

Answer 4

我的问题是,父元素transform: scale(1);显然使得任何元素都不可能fixed在其中.通过删除一切正常...

在我测试的所有浏览器(Chrome,Safari)中似乎都是这样的,因此不知道它是否来自某些奇怪的Web标准.

(这是从进入一个弹出scale(0)来scale(1))

Answer 5

正如其他人指出的那样，父元素上的某些 CSS 属性将无法position: fixed工作。就我而言，是的backdrop-filter。

Answer 6

工作jsFiddle演示

当您使用fixed或使用absolute值时,最好设置top或bottom和left或right(或它们的组合)属性.

也不要设置height的main元素(让浏览器设置它的高度与设置top和bottom性能).

.header{
    position: fixed;
    background-color: #f00;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
}
.main{
    background-color: #ff0;
    position: fixed;
    bottom: 120px;
    left: 0;
    right: 0;
    top: 100px;
    overflow: auto;
}
.footer{
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 7

这可能是一个老话题，但就我而言，是父元素的layoutcsscontain属性值导致了问题。我正在使用混合移动框架，该框架contain在其大部分组件中使用此属性。

例如：

.parentEl {
    contain: size style layout;
}
.parentEl .childEl {
    position: fixed;
    top: 0;
    left: 0;
}

只需删除属性layout的值contain，固定内容就应该可以工作！

.parentEl {
    contain: size style;
}

Answer 8

由于在主体 CSS 中为透视添加了 CSS 值，我遇到了类似的问题

body { perspective: 1200px; }

被杀

#mainNav { position: fixed; }