스티커 바닥 글 바닥 글이 절반까지 잘 페이지이 한 페이지에 스틱 어떤 이유 스티커 행동

Question

christianselig.com/contact

에게주는 것이 아니라, 다른 모든 겉으로는 괜찮아. 나는 나이를 찾고 그 이유를 못 견딜 수 없습니다.

관련 HTML과 CSS를 아래에 넣었습니다.

HTML :

   <div class="alt-contact"> 
        <p>Prefer manual contacting? <a href="mailto:me@example">Email me.</a></p> 
       </div> 
      </div> <!-- This div corresponds to the content wrapper div above --> 

      <div class="footer-wrapper"> 
       <div class="footer"> 
        <p class="copyright">Copyright &copy; 2012 Christian Selig</p> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Work</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 

CSS : position: absolute;이 끈적 끈적한 바닥 글을하지 않기 때문에

.footer-wrapper { 
    background: #f7f7f7; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f7f7f7 0%,#d6d6d6 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0); /* IE6-9 */ 
    border-top: 1px solid #ccc; 
    bottom: 0; 
    height: 16px; 
    overflow: hidden; 
    padding: 8px 0 5px 0; 
    position: absolute; 
    width: 100%; 
} 

    .footer { 
     color: #808080; 
     clear: both; 
     font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; 
     font-size: 0.7em; 
     margin: auto; 
     width: 900px; 
    } 

Answer 1

: 그것은 단지 body 그것을 밀어만큼 키가 큰, 그래서

html, 
body { 
    height: 100%; 
} 

귀하의 html는, 그에게 주어진 더 height이 없습니다. IE8에서, 참고 적게는 R yan Fait's Sticky Footer 같은 "잔재주"솔루션을 사용해야합니다 : 나는 그것을 사용했습니다

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* the bottom margin is the negative value of the footer's height */ 
    margin: 0 auto -142px; 
} 
.footer, .push { 
    /* .push must be the same height as .footer */ 
    height: 142px; 
} 

/* Sticky Footer by Ryan Fait 
    http://ryanfait.com/  */ 

을; 그것은 작동합니다. 그것은 근본적으로 margin과 padding의 유연성을 가지고 있기 때문에 두통을 겪을 수 있습니다. 어떤 고통이 될 수 있습니다.

Answer 2

네, 있습니다. 끈적한 바닥 글을 원하면 position: fixed;을 사용해야합니다. 이렇게하면 다음 관련 부모 개체가 아니라 브라우저 창에 상대적인 동일한 지점에 바닥 글이 머물러있게됩니다.

행운을 빕니다,
브라이언 당신은해야