Question

就像标题告诉你的那样，Chrome存在一些问题。

我有一个backgroundimage，覆盖了浏览器大小的100％宽度和高度auto。该位置设置为固定。这适用于所有浏览器。但后来我想让我的页脚位置固定，它只是不想留在Chrome页面的底部！

只要我不滚动，它就在底部。滚动时，页脚菜单会上升。它只在Chrome中以这种方式起作用。有谁知道如何解决它？

另一件事是我有一些看起来像这样的javascript：

function showContent() {
    document.getElementById('showbox').style.marginTop = '20px';
    document.getElementById('showcontent_btn').onclick = function() {hideContent();} 
    document.getElementById('showcontent_btn').id = 'hidecontent_btn';
}

function hideContent() {
    document.getElementById('showbox').style.marginTop = '30%';
    document.getElementById('hidecontent_btn').onclick = function() {showContent();} 
    document.getElementById('hidecontent_btn').id = 'showcontent_btn';
}

这是2个函数，showContent使我的内容框上升，比主菜单低20px，而hideContent使内容框下降，占整个浏览器的30％，因此可以看到背景图像。它适用于所有浏览器，除了chrome ...

在chrome中，每次单击按钮时，看起来都没有发生，但是如果我开始移动鼠标，我悬停的部分内容会弹出，只显示部分内容并且显示看起来真的搞砸了。要摆脱这个，我必须刷新页面。

请帮助我解决我的问题。我已经尝试过我所知道的一切，但它不起作用。

编辑：这里有一个javascript函数的jsfiddle：http://jsfiddle.net/Z8XPA/4/

* * EDIT2：这是我希望定位的页脚的HTML和CSS： HTML：

<div id="footer_menu"><?php print render($page['footer_menu']); ?></div>

CSS：

#footer_menu { 
    position:fixed; 
    z-index:2; 
    bottom:0px; 
    width:100%;
    height:45px;
    background:rgba(0,0,0,0.5) !important;
    background-color:#000000;
}

祝你好运，丹尼尔伦达尔

Answer 1

尝试CSS

体，HTML {高度：100％，宽度：100％}

Answer 2

听起来这可能是由于使用跳转链接（Fixed element disappears in Chrome）导致固定元素消失的相同因素。 Chrome中有一个错误导致这种情况发生。

对我有用的解决方案是将其添加到固定元素：

-webkit-transform: translateZ(0);

Answer 3

通过简单地添加position：sticky（供应商前缀），我们可以告诉一个元素是position：relative，直到用户将项目（或其父项）从顶部滚动到15px：

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

顶部：15px，元素固定。

source

Chrome，定位和JavaScript问题

3 个答案: