Why didn't the css footer links work?
Question
I am a developer, but now I need to fix a css bug. I have an angular app. There are some general links in the footer. But they are no longer clickable.
Here is my html code
<!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
#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
3 answers
solution1
5 2014-05-14 16:38:51
Your 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:
#footer {
height: 54px;
margin: 0 auto;
z-index:1;
position:relative;
}
solution2
0 2014-05-14 16:35:51
Remove or position: relative; or margin
solution3
0 2014-05-14 17:22:26
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.
Second, your padding is only adding space respective to inside #content . It's not pushing down against #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 .
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.
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.
OR you could set both #content and #footer to the same position type, static or 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.