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

Why didn't the css footer links work?

本文关键字：不起作用 链接 css 为什么      更新时间：2023-09-26

我是一名开发人员，但现在我需要修复一个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

您的margin: 0 auto -54px;规则导致此问题。页脚链接位于内容下面。修改页边距或在页脚添加z-index:

#footer {
    height: 54px;
    margin: 0 auto;
    z-index:1;
    position:relative;
}
<<p> jsFiddle例子/strong>

移动位置:相对;div或保证金

问题出在

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。

考虑到我看不到你的其余内容，我不知道你正在寻找的整体布局的最佳解决方案。

相关文章：