2016-10-26 2 views
1

나는 CSS로 꼬리말을 만들고 페이지 하단에 꼬리말을 넣으려고하지만, 일부 내용은 꼬리말 안으로 들어간다. 다음이 내 바닥 글 CSScss footer가 공백을 차지하지 않고 내용이 완전히 표시되지 않음

#footer { 
position: fixed; 
bottom: 0; 
width: 100%; 
} 

<div id="footer" style="background-color:#0099CC"> 
    <center> 
    <table style="width:100%"> 
    <tr> 
    <td valign="top">Copyright © 2016, Chaatz</td> 
    <td align="right" style="white-space:pre"><a href="https://legal.html">Terms and Conditions</a> 
               <a href="https://privacy.html">Privacy Notice</a></td> 
    </tr> 
    </table> 
    </center> 
    <br> 
    <br> 
</div> 
+0

자세히 설명해 주시겠습니까? 뭐가 잘못 되었 니? –

+0

어쩌면 나는 바닥을 생각한다 : 0; div를 아무 높이도 만들지 않았으므로 페이지의 내용이 div 내부에 숨겨져 있습니다. –

+2

왼쪽에 #footer가 0으로 추가되었으므로 여기에 모든 내용이 표시됩니다. https://jsfiddle.net/bemuf05u/ –

답변

1

당신은 콘텐츠의 패딩 바닥과 바닥 글 요소의 높이를 사용하고 바닥 글 요소의 마진 - 상단에 같은 값을 부정 할 수 있습니다.

<div class="wrapper"> 
    page content 
</div> 

<div class="footer"> 
    footer content 
</div> 

.wrapper{ 
    height:100%; 
    padding-bottom:150px; 
} 

.footer{ 
    height:150px; 
    margin-top:-150px; 
} 
관련 문제