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

请参阅this fiddle

Answer 1

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

Answer 2

您需要明确地为页眉和页脚提供宽度

width: 100%;

<强> Working fiddle

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

Answer 3

我的问题是，父元素具有browser.find_element_by_class_name("button background-primary-hover text-primary").click()，这显然使得不可能在其中放置任何元素transform: scale(1);。通过删除所有内容，一切正常...

在我测试过的所有浏览器（Chrome，Safari）中似乎都是这样，所以不知道它是否来自某种奇怪的网络标准。

（这是一个从fixed到scale(0)的弹出窗口）

Answer 4

Working jsFiddle Demo

当您使用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 5

您没有向元素添加任何宽度或内容。您还应该在主元素的顶部和底部设置填充，以便内容不会隐藏在页眉/页脚的后面。您也可以删除高度，让浏览器根据内容决定。

http://jsfiddle.net/BrmGr/12/

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

Answer 6

我也遇到了类似的问题，这是由于在主体CSS中添加了用于视角的CSS值

body { perspective: 1200px; }

杀人

#mainNav { position: fixed; }

Answer 7

另一个原因可能是包含CSS animation属性的父容器。那就是我的生活。

Answer 8

对于主要使用导航栏而不是顶部的任何人来说，我发现如果 positon: fixed; 元素的父容器中的任何元素的宽度超过 100% - 因此创建水平滚动条 - 是问题。

要解决它，请将“父元素”设置为 oveflow-x: hidden;

Answer 9

您没有设置宽度，div中没有内容是一个问题。另一个是html的工作方式...当所有三个固定时，是层次结构从下到上...因此内容位于标题之上，因为它们都是固定的...所以在这种情况下你需要在标题上声明一个z-index ...但是我不会这样做...保留一个亲戚，这样它就可以正常滚动。

首先在此移动... FIDDLE HERE

HTML

<header class="global-header">HEADER</header>

<section class="main-content">CONTENT</section>

<footer class="global-footer">FOOTER</footer>

CSS html，body { 填充：0;保证金：0; 身高：100％; }

.global-header {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: red;
}

.main-content {
    width: 100%;
    float: left;
    height: 50em;
    background-color: yellow;
}

.global-footer {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: lightblue;
}

@media (min-width: 30em) {

    .global-header {
        position: fixed;
        top: 0;
        left: 0;
    }

    .main-content {
        height: 100%;
        margin-top: 5em; /* to offset header */
    }

    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }

} /* ================== */

Answer 10

您忘了添加两个div的宽度。

.header {
    position: fixed;
    top:0;
    background-color: #f00;
    height: 100px; width: 100%;
}
.footer {
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px; width:100%;
}

demo

Answer 11

如果我们一直努力为这些用户提供高质量的网站，我们绝不会说服人们离开IE6。

只有IE7 +理解“position：fixed”。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

所以你对IE6运气不好。为了让页脚半粘，试试这个：

.main {
  min-height: 100%;
  margin-bottom: -60px;
}
.footer {
  height: 60px;
}

你也可以使用iFrame。

这样可以防止页脚从页面底部“抬起”。如果您有多个内容页面，那么它将从网站中删除。

在哲学上，我宁愿将IE6用户指向http://browsehappy.com/并花时间将IE6的黑客攻击保存在别的东西上。

Answer 12

这可能是一个古老的话题，但就我而言，是导致问题的父元素的css UICollectionViewLayout属性的layout值。我正在使用混合移动设备的框架，该框架在其大多数组件中都使用此contain属性。

例如：

contain

只需删除.parentEl { contain: size style layout; } .parentEl .childEl { position: fixed; top: 0; left: 0; }属性的layout值，固定内容就可以使用！

contain

Answer 13

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

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

固定的位置不起作用

13 个答案: