html - 固定位置不起作用

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

看到这个小提琴

score 65 · Accepted Answer

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

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

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

score 38 · Accepted Answer

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

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

score 24 · Accepted Answer

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

width: 100%;

工作小提琴

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

score 17 · Accepted Answer

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

score 7 · Accepted Answer

工作 jsFiddle 演示

当您使用fixedorabsolute值时，最好设置toporbottom和leftor right（或它们的组合）属性。

也不要设置heightofmain元素（让浏览器通过设置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;
}

score 5 · Accepted Answer

我有一个类似的问题，由于在 body CSS 中为透视添加了 CSS 值

body { perspective: 1200px; }

被杀

#mainNav { position: fixed; }

score 3 · Accepted Answer

对于主要与导航栏有此问题的人，而不是停留在顶部，我发现如果元素的父容器中的任何元素positon: fixed;的宽度超过 100% - 所以创建水平滚动条 - 就是问题所在。

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

score 3 · Accepted Answer

3

另一个原因可能是包含 CSSanimation属性的父容器。对我来说就是这样。

于 2020-02-27T18:26:38.390 回答

score 1 · Accepted Answer

您没有设置宽度并且 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 { padding: 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;
    }

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

score 1 · Accepted Answer

您忘记添加两个 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%;
}

演示

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

例如：

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

只需删除属性的layout值，contain固定的内容就可以了！

.parentEl {
    contain: size style;
}

score 1 · Accepted Answer

我有同样的问题，我的父母被设置为 transform-style: preserve-3d; 删除它对我有用。

score 0 · Accepted Answer

We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.

Only IE7+ understood "position: fixed".

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

So you're out of luck for IE6. To get the footer semi-sticky try this:

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

You could also use an iFrame maybe.

This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.

On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.

html - 固定位置不起作用

14 回答 14

Related

Reference