无法在Firefox和Chrome中点击粘性页脚中的链接 [英] Link in sticky footer not clickable in Firefox and Chrome

问题描述

我使用如下所示的粘性页脚：

• 如何让页脚停留在网页的底部？ / a>


• http ：//ryanfait.com/resources/footer-stick-to-bottom-of-page/

我有一个带有链接的段落，我想在页面底部，所以我把它放在.footer。

问题是链接是不可点击Firefox 3.5.2和Chrome，它在.push后面。它在IE7和IE8工作，但我猜这不多说。

我玩弄了z索引，但不工作。顺便说一句，我需要在#page中的位置：relative在这个div中放置一些东西。

有一种方法可以链接到.footer可在所有浏览器中点击？

代码的相关部分：

css

  html，body {
 height：100％; 
} 
 #page {
 width：962px; 
 text-align：left; 
 min-height：100％; 
 / * sticky footer part * / 
 height：auto！important; 
 height：100％; 
 margin：0 auto -90px; 
 / * end粘性页脚* / 
 position：relative; 
} 
 / * sticky footer part * / 
 .push，.footer {
 height：90px; 
} 
 .push {
} 
 .footer {
 background：＃181f18 url（../ images / background-top.png）no-repeat center bottom ; 
} 
  

html

 < div id =page> 
< div id =wrapper> 
< div id =contents> bla bla< / div> 
< / div> 
< div id =footer> bla bla< / div> 
< div class =push>< / div> 
< / div> 
< div class =footer> 
< p>< a href =http://www.some-site.com/>部分文字< / a>< / p& 
< / div>解决方案：解决方案：添加一个位置：relative和z-axis，然后将它们添加到相应的对象中，如下：
  

  .push，.footer {
 height：90px; 
 position：relative; 
} 
 .push {
 z-index：9000; 
 position：relative; 
} 
 .footer {
 background：＃181f18 url（../ images / background-top.png）no-repeat center bottom; 
 z-index：9999; 
 position：relative; 
} 
  

I am using a sticky footer like described in:

• How do you get the footer to stay at the bottom of a Web page?
• http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

I have a paragraph with a link that I want to be at the bottom of the page, so I put it in .footer.

The problem is that the link is not clickable in Firefox 3.5.2 and Chrome, it is behind .push. It does work in IE7 and IE8 but I guess that doesn´t say much.

I have toyed around with z-indexes but that does not work. By the way, I need the position:relative in #page to position some stuff inside that div.

Is there a way to make a link in .footer clickable in all browsers?

The relevant parts of the code:

css

html, body {
    height: 100%;
}
#page {
    width: 962px;
    text-align: left;
    min-height: 100%;
    /* sticky footer part */
    height: auto !important;
    height: 100%;
    margin: 0 auto -90px;
    /* end sticky footer */
    position: relative;
}
/* sticky footer part */
.push, .footer {
    height: 90px;
}
.push {
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
}

html

<div id="page">
  <div id="wrapper">
    <div id="contents">bla bla</div>
  </div>
  <div id="footer">bla bla</div>
  <div class="push"></div>
</div>
<div class="footer">
    <p><a href="http://www.some-site.com/">Some Text</a></p>
</div>

解决方案

Solved it, adding a postion:relative and z-indexes did it:

.push, .footer {
    height: 90px;
    position: relative;
}
.push {
    z-index: 9000;
    position: relative;
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
    z-index: 9999;
    position: relative;
}

这篇关于无法在Firefox和Chrome中点击粘性页脚中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！