粘頁腳不給置頂行爲

-2

出於某種原因，頁腳只有堅持半山腰此頁面一個頁面上，但所有的人都貌似不錯。我已經尋找了年齡，不能固定原因。

我已經把相關的HTML和CSS放在下面，而且更多的東西顯然是可用的。

HTML：

   <div class="alt-contact"> 
        <p>Prefer manual contacting? <a href="mailto:[email protected]">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：

.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; 
    }

來源

2012-09-16 Doug Smith

不要讓你。頁腳粘貼在底部？ – Jawad

頁腳粘貼到文檔的底部，而不是窗口。當您的文檔小於瀏覽器窗口的高度（因爲您沒有足夠的內容）時，頁腳不會出現在底部。 –

它適用於最新的鉻 – Jashwant

你應該有：

html, 
body { 
    height: 100%; 
}

你html有沒有給它height，所以才那麼高的body推動它。請注意，在IE8，少你必須使用如R yan Fait's Sticky Footer「tricker」的解決方案：

* { 
    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的靈活性。這可能是一個痛苦。

來源

2012-09-16 18:03:43

謝謝，這工作完美。 –

@DougSmith然後接受答案。 – Pavlo

是的，這是因爲position: absolute;不會使粘頁腳。如果你想要一個粘性頁腳，你需要使用position: fixed;。這將使頁腳停留在與瀏覽器窗口相同的位置，而不是下一個相關的父對象。

好運，
-Brian

來源

2012-09-16 17:58:29 OneChillDude

真的嗎？位置：絕對; ？內容溢出時會發生什麼？ – Jawad

粘頁腳不給置頂行爲

回答

相關問題