Question

我是开发人员，但现在我需要修复一个css错误。我有一个角度应用程序。页脚中有一些常规链接。但它们不再可点击。

这是我的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>

这是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;
}

我删除了代码并将其放入plunker： http://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp

Answer 1

您的margin: 0 auto -54px;规则导致此问题。页脚链接最终位于内容下方。修复边距或向页脚添加z-index：

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

<强> jsFiddle example

Answer 2

删除或定位：亲属;或保证金

Answer 3

问题是

的组合

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

这导致一次发生两件事。首先，您的<div id="content">向上滑动，带有负边距，相对于它向下拉#footer。

其次，您的填充仅添加了#content内部的空间。它并没有压低#footer。

这与另一个问题相关 - 由于#footer默认为position:static，但#content为position:relative，#footer按位置顺序呈现文件流程，而不是#content传达的职位。

所以你拥有的是两个<div>部分的简单重叠，这意味着你无法点击链接，因为#content正在吸收这些点击。

至于问题的解决方案，您可以完全剪切54px/-54px，因为无论如何，您的#footer内容可能会与#content相提并论。

或者您可以将#content和#footer设置为相同的排名类型static或relative。

鉴于我无法看到您的其他内容，我不知道您正在寻找的整体布局的最佳解决方案。

为什么css页脚链接不起作用？

3 个答案: