Html 固定位置不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16879737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position fixed is not working
提问by Bhojendra Rauniyar
I have the following html...
我有以下html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
并遵循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;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
但是为什么页眉和页脚没有固定，我做错了什么？我只希望“主要”可滚动，“页眉”和“页脚”位于固定位置。怎么做？
+-------------------------------------+
| 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)
+-------------------------------------+
See this fiddle
看到这个小提琴
采纳答案by Mr_Green
you need to give width explicitly to header and footer
您需要明确地为页眉和页脚指定宽度
width: 100%;
If you want the middle section not to be hidden then give position: absolute;width: 100%;and set top and bottomproperties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.
如果您希望中间部分不被隐藏，则为其提供position: absolute;width: 100%;并设置top and bottom属性（与页眉和页脚高度相关）并提供 parent element position: relative。（当然，删除height: 700px;.）并使其可滚动，给overflow: auto.
回答by OZZIE
My issue was that a parent element had transform: scale(1);this apparently makes it impossible for any element to be fixedinside it. By removing that everything works normally...
我的问题是父元素具有transform: scale(1);这显然使得任何元素都不可能fixed在其中。通过删除一切正常...
It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.
在我测试的所有浏览器（Chrome、Safari）中似乎都是这样，所以不知道它是否来自某些奇怪的网络标准。
(It's a popup that goes from scale(0)to scale(1))
（这是一个从scale(0)到的弹出窗口scale(1)）
回答by user1429980
Double-check that you haven't enabled backface-visibilityon any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...
仔细检查您是否没有启用backface-visibility任何包含元素，因为这会破坏position: fixed. 对我来说，我使用的是 CSS3 动画库...
回答by shakee93
if a parent container contains transform this could happen. try commenting them
如果父容器包含转换，则可能会发生这种情况。尝试评论他们
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
回答by shakee93
When you are working with fixedor absolutevalues,
it's good idea to set topor bottomand leftor right(or combination of them) properties.
当您使用fixedorabsolute值时，最好设置toporbottom和leftor right（或它们的组合）属性。
Also don't set the heightof mainelement (let browser set the height of it with setting topand bottomproperties).
也不要设置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;
}
回答by Claud
I had a similar problem caused by the addition of a CSS value for perspective in the body CSS
由于在主体 CSS 中为透视添加了 CSS 值，我遇到了类似的问题
body { perspective: 1200px; }
Killed
被杀
#mainNav { position: fixed; }
回答by Kropek
This might be an old topic but in my case it was the layoutvalue of css containproperty of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this containproperty in most of their component.
这可能是一个老话题，但在我的情况下，它是导致问题的父元素layout的 csscontain属性的值。我正在使用混合移动框架，该框架contain在其大部分组件中使用此属性。
For example:
例如：
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Just remove the layoutvalue of containproperty and the fixed content should work!
只需删除属性的layout值，contain固定内容应该可以工作！
.parentEl {
contain: size style;
}
回答by jammykam
You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.
您没有向元素添加任何宽度或内容。此外，您应该将填充顶部和底部设置为主要元素，以便内容不会隐藏在页眉/页脚后面。您也可以删除高度，让浏览器根据内容来决定。
.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%;}
回答by David Gilbertson
We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.
如果我们继续努力为这些用户提供高质量的网站，我们将永远不会说服人们离开 IE6。
Only IE7+ understood "position: fixed".
只有 IE7+ 理解“位置：固定”。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
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:
所以你对 IE6 不走运。要使页脚半粘性，请尝试以下操作：
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
You could also use an iFrame maybe.
您也可以使用 iFrame。
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.
从哲学角度来说，我宁愿将 IE6 用户指向http://browsehappy.com/并将时间花在为 IE6 做其他事情上。
回答by sheriffderek
You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.
您没有设置宽度并且 div 中没有内容是一个问题。另一个是 html 的工作方式......当所有三个固定时，层次结构从下到上......所以内容位于标题的顶部，因为它们都是固定的......所以在这种情况下你需要在标题上声明一个 z-index ......但我不会那样做......留下那个相对的，这样它就可以正常滚动。
Go mobile first on this... FIDDLE HERE
首先在这个上移动... FIDDLE HERE
HTML
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS html, body { padding: 0; margin: 0; height: 100%; }
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;
}
} /* ================== */
