固定的位置不起作用

时间:2013-06-02 04:21:16

标签: html css

我有以下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

13 个答案:

答案 0 :(得分:15)

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

答案 1 :(得分:14)

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

width: 100%;

<强> Working fiddle

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

答案 2 :(得分:10)

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

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

(这是一个从fixedscale(0)的弹出窗口)

答案 3 :(得分:5)

Working jsFiddle Demo

当您使用fixedabsolute值时, 最好设置topbottom以及leftright(或它们的组合)属性。

另外,请勿设置height元素main(让浏览器设置topbottom属性的高度。

.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;
}

答案 4 :(得分:1)

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

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%;}

答案 5 :(得分:1)

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

body { perspective: 1200px; }

杀人

#mainNav { position: fixed; }

答案 6 :(得分:1)

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

答案 7 :(得分:1)

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

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

答案 8 :(得分:0)

您没有设置宽度,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;
    }

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

答案 9 :(得分:0)

您忘了添加两个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

答案 10 :(得分:0)

如果我们一直努力为这些用户提供高质量的网站,我们绝不会说服人们离开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的黑客攻击保存在别的东西上。

答案 11 :(得分:0)

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

例如:

contain

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

contain

答案 12 :(得分:0)

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

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