맨 아래로 바닥 글을 가져 오는 방법은 무엇입니까?

Question

현재 웹 페이지에서 작업 중이며 과정 중에 ID가 바닥 글 인 "footer"인 div를 가져 오려고합니다. 처음에는 효과가 있었지만 내 페이지에 연회실을 배치했을 때 div는 약 50p 더 높았습니다.

어떻게 이것을 피할 수 있습니까?

#footer{ position:absolute;bottom:0;} 

Answer 1

체크 아웃이 Sticky Footer

그러나, 천막 태그는 매우 오래되어 당신이 예로서 jsFiddle를 만들 수는 HTML5

Answer 2

Demo

HTML

<div id="container"> 
    <div id="header"> 
     <!-- Header start --> 
     <h1>How to keep footers at the bottom of the page (CSS demo)</h1> 
     <!-- Header end --> 
    </div> 
    <div id="body"> 
     <!-- Body start --> 
     <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal.</p> 
     <!-- Body end --> 
    </div> 
    <div id="footer"> 
     <!-- Footer start --> 
     <p><strong>Footer</strong> (always at the bottom).</p> 
     <!-- Footer end --> 
    </div> 
</div> 

CSS

html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; 
    /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; 
    /* Height of the footer */ 
    background:#6cf; 
} 
/* other non-essential CSS */ 
#header p, #header h1 { 
    margin:0; 
    padding:10px 0 0 10px; 
} 
#footer p { 
    margin:0; 
    padding:10px; 
} 

참고 :이 방법은 I이었다 다음 구문하여 스타일링에 의해 극단적 하단에 바닥 글을 배치하는 데 사용 : 본문 내용이 충분히 길면 바닥 글이 페이지 하단에 표시됩니다. 콘텐츠가 짧으면 화면 하단에 붙어 있습니다.