바닥 글을 항상 페이지 하단에 두는 방법은 무엇입니까?

내 페이지 맨 아래에 원하는 이미지가 115px 있습니다. 나는 페이지의 맨 아래에 항상 머무르게하는 방법을 온라인으로 검색했고 복잡한 대답을 많이 받았다. 나는 적어도 내 브라우저에서 작동하는 내 자신의 코드로 만들었다. 미숙 한 방법일지도 모르고, 잠재적 인 문제가 있는지 알고 싶었습니다. 여기에 내 코드바닥 글을 항상 페이지 하단에 두는 방법은 무엇입니까?

이 본문은 한 뷰포트의 높이와 같은 경우 무슨 일이 일어날 지 고려할 수 있습니다

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;"> 
&nbsp; 
</div>

출처

2013-02-19 Alesana

, 그것을 작동합니다. 원하는 방식으로 페이지를 만들 수있는 사람의 승인이 필요하지 않습니다. 지원하려는 모든 브라우저 및 버전에서 확인하십시오. '고정'은 무언가를 한 페이지에 두는 올바른 방법입니다. 그것이 '바닥 : 0 %'라고 말하고 필요에 따라 마진을 조절하는 것이 나에게 더 합리적이긴하지만 말했듯이, 효과가 있다면 말이야! –

본문 텍스트가 뷰포트 높이만큼 긴 경우 어떻게 될지 고려해야합니다. 텍스트가 고정 꼬리말 뒤에 표시 될 수 있으며 텍스트를 볼 수 없습니다. –

나는 이것을 깨닫는다. 하단보다 낮게 유지해야하는 경우를 제외하고는 바닥에 유지할 제안이 있습니까? – Alesana

입니다. 텍스트가 고정 바닥 글 뒤에 표시 될 수 있으며이를 볼 수 없게됩니다.

좋습니다.

#footer { 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both; 
}

그런 다음 모든 내용을 래핑하는 div에는 바닥 글의 높이와 동일한 아래쪽 패딩이 있어야합니다.

#main { padding-bottom: 150px; } /* must be same height as the footer */

출처

2013-02-19 15:15:25

'top : 100 %;'을 계속 유지해야합니까? 암호? 그것을 사용할 때, 꼬리말은 낮기 때문에 많은 빈 공간을 스크롤해야 볼 수 있습니다. – Alesana

다음은 페이지 하단에서 바닥 글을 수행하는 방법입니다. footer을 <div id="footer">...</div>으로 대체 할 수 있지만 HTML5 footer을 선호합니다. 그것이 작동하는 경우

enter image description here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     body { height: 100%;} 
     footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
       position: fixed; bottom: 0; left: 0; height:115px;width:100%; } 
    </style> 
</head> 
<body> 
    <footer> 

    </footer> 
</body> 
</html>

출처

2013-02-19 15:30:24 Win

바닥 글을 항상 페이지 하단에 두는 방법은 무엇입니까?

답변

관련 문제