바닥 글이 페이지 하단에 없음

Question

내가 만드는 사이트에서 바닥 글에 문제가 있습니다. 그것은 바닥에 앉지 않을 것입니다. 나는 그것의 일반적인 불평을 알고있다, 그러나 나가 시도한 모두는 일하지 않거나 다른 CSS 성분을 끊었다.

임시 도메인에 웹 사이트를로드했습니다.

we -sx.com에 있습니다.

상자 그림자 효과가있는 .container div 아래에 바닥 글을 넣기를 원합니다.

Answer 1

이 일반적인 문제, 그리고 내가 본 최고의 솔루션은 이것이다 :

기본적으로

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

100 %의 최소 높이가 사업부에 모든 콘텐츠를 옮기고 바닥 글 div를 아래쪽으로 푸시합니다.

Answer 2

당신이 때문에 :

클래스 ".container"

에

position: absolute; 

이제

그에게 div.container을 일으킬 것를 제거하고는 div.container 아래에 있어야한다 내부에 두 개의 떠 다니는 요소로 인해 붕괴됩니다. 그 문제에 대한 클리어 픽스 (clearfix)가 필요합니다. 이것을 "content"클래스에 추가 할 수 있습니다.

이 스타일 시트에 CSS의 다음 줄을 추가합니다 다음과 같이

.content:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Answer 3

여기에 일부 코드를 찾을 수 있습니다. .wrapper의 여백에 대한 음수 값은 .footer 및 .push 높이와 동일한 수입니다. 음수 여백은 항상 바닥 글의 전체 높이 (추가 할 수있는 모든 패딩 또는 테두리 포함)와 같아야합니다. CSS에서

:

height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
} 

이 HTML 구조를 따르십시오. .wrapper 및 .footer div 태그 외부에있을 수있는 콘텐츠는 CSS가있는 위치에 있지 않는 한 없습니다. 바닥 글을 겹쳐 쓰지 않도록 숨겨진 요소이므로 .push div 안에 내용이 없어야합니다. HTML 바디에

: 여기

귀하의 웹 사이트 콘텐츠.

<div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright (c) 2013</p> 
    </div>