为什么CSS页脚链接无效？

Question

I am a developer, but now I need to fix a css bug. 我是一名开发人员，但现在需要修复一个CSS错误。 I have an angular app. 我有一个棱角分明的应用程序。 There are some general links in the footer. 页脚中有一些常规链接。 But they are no longer clickable. 但是它们不再是可点击的。

Here is my html code 这是我的HTML代码

<!doctype html>
<html lang="en" ng-app="example">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Globalization Resource Center</title>
    <link rel="stylesheet" type="text/css" href="./style.css"/>
<body>
    <div id="content">
        <div class="container-fluid">
            <div class="row-fluid" ng-view></div>
        </div>
    </div>
    <div id="footer">
        Copyright Text goes here.
        <a onclick="window.open(this.href);return false;" href="http://www.google.com" title="Privacy Policy"> Example Link</a> |
        <a href="mailto:info@example.com" title="Contact Us">Contact Us</a>
    </div>
</body>
</html>

Here is the style.css 这是style.css

#content {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 100%;
  padding-bottom: 54px;
  margin: 0 auto -54px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

#footer {
  height: 54px;
  margin: 0 auto;
}

I stripped down the code and put it in plunker at: http://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp 我精简了代码，并将其放在以下代码中： http ://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp

Answer 1

Your margin: 0 auto -54px; 您的margin: 0 auto -54px; rule is causing this. 规则导致了这一点。 The footer links end up sitting under the content. 页脚链接最终位于内容下方。 Either fix the margin or add a z-index to the footer: 固定页边距或在页脚中添加z-index ：

#footer {
    height: 54px;
    margin: 0 auto;
    z-index:1;
    position:relative;
}

jsFiddle example jsFiddle示例

Answer 2

Remove or position: relative; 除去或定位：相对 or margin 或保证金

Answer 3

The problem is the combination of 问题是

padding-bottom: 54px;
margin: 0 auto -54px;

This is causing two things to happen at once. 这导致立即发生两件事。 First, your <div id="content"> is sliding up with the negative margin, pulling #footer below up relative to it. 首先，您的<div id="content">以负边距向上滑动，从而将#footer相对于其向下拉。

Second, your padding is only adding space respective to inside #content . 其次，您的填充仅在#content内部添加空间。 It's not pushing down against #footer . 它不会#footer 。

This is related to another issue - since #footer is by default position:static , but #content is position:relative , #footer is rendering in order of position in the document flow, not against the position communicated by #content . 这与另一个问题有关-因为#footer默认情况下是position:static ，但是#content是position:relative ， #footer是按文档流中的位置顺序呈现，而不是与#content传达的位置相对。

So what you have is simple overlap of the two <div> pieces, which means you can't click on the links since #content is absorbing those clicks. 因此，您只需将两个<div>部分重叠即可，这意味着您无法单击链接，因为#content正在吸收这些点击。

As for a solution to your problem, you can simply cut the 54px/-54px entirely, as your #footer content presumably is going to be smack against #content anyhow. 至于您的问题的解决方案，您可以简单地将其全部剪切为54px/-54px ，因为您的#footer内容可能#footer会与#content 。

OR you could set both #content and #footer to the same position type, static or relative . 或者，您可以将#content和#footer设置为相同的位置类型， static或relative 。

Given that I can't see the rest of your content, I wouldn't know the best solution for the overall layout you're looking for. 鉴于我看不到您的其余内容，因此我不知道您想要的整体布局的最佳解决方案。

为什么CSS页脚链接无效？

问题描述

3 个解决方案

解决方案1
5 2014-05-14 16:38:51

解决方案2
0 2014-05-14 16:35:51

解决方案3
0 2014-05-14 17:22:26

为什么CSS页脚链接无效？

问题描述

3 个解决方案

解决方案1 5 2014-05-14 16:38:51

解决方案2 0 2014-05-14 16:35:51

解决方案3 0 2014-05-14 17:22:26

解决方案1
5 2014-05-14 16:38:51

解决方案2
0 2014-05-14 16:35:51

解决方案3
0 2014-05-14 17:22:26