바닥 글에 페이지 하단에 머물러 있지 않은 바닥 글

Question

내 페이지 하단에 머물도록 내 바닥 글이 있습니다. here,하지만 저는 무엇을했는지, 무엇을했는지, 이제는 내용 아래에 있습니다. 나는 wrapper의 min-height 값을 변경하려고 시도했지만, 아무 것도하지 않았다.

바닥 글 코드 :

<div id='footer'>&copy; Copyright 2013 Austen Patterson. All Rights Reserved.</div> 

</body> 
</html> 

바닥 글 스타일 :

#footer { 
margin-right: 10%; 
min-width: 100%; 
color: #4bb3e6; 
text-align: right; 
} 

바디/래퍼 스타일 :

body { 
    background:url("http://pattersoncode.ca/incls/pw_pattern.png"); 
    color: black; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana, sans-serif"; 
    min-width: 94%; 
    min-height: 95%; 
    font-family: 'Muli', sans-serif; 
} 
#wrapper { 

    animation: fadein 2s; 
    -moz-animation: fadein 0.25s; 
    -webkit-animation: fadein 0.25s; 
    -o-animation: fadein 0.25s; 
    min-width: 100%; 
    min-height: 95%; 

} 

Answer 1

시도는 추가 :

position:absolute; 
bottom: 0; 

,

을 바닥 글 선택기에 추가하십시오.

Answer 2

아마도 너는 최소 높이가 95 %이기 때문일 수 있습니다. 그렇지 않다면 시도해보십시오.

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

Answer 3

position: absolute을 사용할 때주의하십시오. 글을 쓰는 시점에서 페이지에 너무 많은 내용이있을 때 페이지가 깨집니다 (스크롤바에 충분한 내용). 나는 당신이 항상 내용 밑에 꼬리말을 원한다고 가정한다. 확인 신체의 min-height 스타일의 작품을 만들기 위해

, 추가

html { height: 100% } 

는 또한, 바닥 글 항상 내용 아래에 표시 확인,

body { 
    margin: 0; //remove default margin. you may not need 
       //this, but it will prevent problems with 
       //the body being too big 
    min-height: 100%; 
    box-sizing: border-box; //making sure padding works with 100% sizing. 
    padding-bottom: 40px; //just enough for your footer 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
} 

를 추가 이것은 당신의 바닥 글을 제거합니다 페이지의 흐름에서 하지만 OK이면입니다. 페이지 하단에 40px 공간이 할당되어 있기 때문입니다.

Answer 4

이

#footer { 
    background: none repeat scroll 0 0 transparent; 
    color: #4BB3E6; 
    position: fixed; 
    text-align: right; 
    width: 100%; 
} 

Answer 5

사용 positon:fixed, DEMO에게 http://jsfiddle.net/VDfcC/

#footer { 
    position:fixed; 
    left:0; 
    bottom:0; 
    z-index:10; 
    margin-right: 10%; 
    min-width: 100%; 
    color: #4bb3e6; 
    text-align: right; 
}