固定位置不起作用

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

看到 这个小提琴

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

width: 100%;

工作小提琴

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

原文由 Mr_Green 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Nikolay Dyankov 发布，翻译遵循 CC BY-SA 4.0 许可协议