0

就像标题告诉你的那样，我在使用 Chrome 时遇到了一些问题。

我得到了一个背景图像，它覆盖了浏览器大小的 100% 宽度和高度自动。位置设置为固定。这适用于所有浏览器。但后来我想让我的脚注位置固定，它只是不想留在 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让我的contentbox向上，在主菜单下方20px，hideContent让contentbox向下，占整个浏览器的30%，这样就可以看到背景图片了。它适用于所有浏览器，除了 chrome...

在 chrome 中，每次单击按钮时，似乎什么都没有发生，但是如果我开始移动鼠标，我悬停的部分内容开始弹出，只显示部分内容，看起来真的很乱向上。为了摆脱这个，我必须刷新页面。

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

编辑：在这里你有一个工作的 jsfiddle 的 javascript 函数：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;
}

最好的问候，丹尼尔·伦达尔

4

3 回答 3

0

听起来这可能是由于使用跳转链接时导致固定元素有时消失的同一件事（固定元素在 Chrome 中消失）。chrome 中有一个错误导致这种情况发生。

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

-webkit-transform: translateZ(0);
于 2013-11-06T13:53:29.513 回答
0

试试 CSS

正文,html{高度:100%,宽度:100%}

于 2013-01-30T03:43:42.640 回答
0

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

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

在顶部：15px，元素变得固定。

资源

于 2017-09-16T14:41:56.683 回答