왜 CSS 바닥 글 링크가 작동하지 않았습니까?

나는 개발자이지만 이제는 CSS 버그를 수정해야합니다. 각도 앱이 있습니다. 바닥 글에는 몇 가지 일반적인 링크가 있습니다. 그러나 더 이상 클릭 할 수 없습니다. 여기 왜 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:[email protected]" title="Contact Us">Contact Us</a> 
    </div> 
</body> 
</html>

이다 내가 코드를 제거

#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; 
}

있는 style.css를하고에 plunker에 넣어 : http://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp

출처

2014-05-14 Joan Yin

onclick은 "A"태그에서 지원되지 않습니다. –

제거 또는 위치 : 상대적; 또는 여백

출처

2014-05-14 16:35:51 keypaul

귀하의 margin: 0 auto -54px; 규칙이 원인입니다. 바닥 글 링크가 내용 아래에 표시됩니다. 어느 쪽의 여백을 수정하거나 바닥 글에 z-index을 추가

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

jsFiddle example

출처

2014-05-14 16:38:51 j08691

감사합니다. 이제 작동합니다. –

문제는이 두 가지가 동시에 발생하는 원인이되는

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

의 조합입니다. 먼저 <div id="content">이 음수 여백으로 위로 움직여서 #footer을 아래쪽으로 잡아 당깁니다.

두 번째로, 패딩은 내부의 공간 만 추가합니다. #content. #footer에 대해 푸시 다운하지 않습니다. #footer 기본적 position:static으로하기 때문에,하지만 #content는 #footer하지 #content에 의해 전달 위치에 대해, 문서 흐름에서 위치의 순서로 렌더링되는, position:relative입니다 -

이

다른 문제와 관련되어있다.

그럼 두 개의 <div> 조각이 단순하게 겹치므로 #content은 해당 클릭을 흡수하기 때문에 링크를 클릭 할 수 없습니다. 당신의 #footer 내용이 아마 어쨌든 #content에 헤로인이 될 것입니다으로

은 당신의 문제에 대한 해결책에 관해서는, 당신은 단순히 완전히 54px/-54px을 줄일 수 있습니다.

또는 #content 및 #footer을 모두 같은 위치 유형 static 또는 relative으로 설정할 수 있습니다.

콘텐츠의 나머지 부분을 볼 수 없다는 것을 감안할 때 내가 찾고있는 전체 레이아웃에 가장 적합한 솔루션을 모르겠다.

출처

2014-05-14 17:22:26 TiltedListener

왜 CSS 바닥 글 링크가 작동하지 않았습니까?

답변

관련 문제