固定頁腳，不會越過內容的底部

我想獲得一個頁腳，如果內容比視口長，將始終停留在視口的底部。如果內容未伸展到視口的底部，則頁腳將停留在內容的底部。固定頁腳，不會越過內容的底部

這裏是我的HTML：

<div id="wrapper"> 
    <!-- variable content and other divs in here --> 
    <div id="footersurround"> 
     <div id="footerparent"> 
      <div id="footer"></div> 
      <div id="linkshome"><!-- links in here --></div> 
     </div> 
    </div> 
</div>

和CSS：

#wrapper { 
    position: absolute; 
    left: 50%; 
    width: 1024px; 
    margin: -512px; 
    margin-top: 8px; 
} 

#footersurround { 
    position: fixed; 
    top: 0; 
    max-width: 1024px; 
    width: 100%; 
    height: 100%; 
    max-height: inherit; /* I want this to take the same value as the wrappers height if I set it to a value(e.g 768px) it works perfectly but when setting it to inherit it will stretch the whole viewport even if the wrapper does not*/ 
} 

#footerparent { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    z-index: 30; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    margin: 0 auto; 
    min-height: 60px; 
    width: 1024px; 
    background-color: black; 
    opacity: 0.50; 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
    z-index: 16; 
} 

#linkshome { 
    position: absolute; 
    bottom: 0; 
    margin: 0 auto; 
    margin-top: -47px; 
    min-height: 47px; 
    width: 100%; 
    max-width: 1074px; 
    z-index: 17; 
    text-align: center; 
    font-size: 24px; 
    font-family: Verdana; 
    color: white; 
}

來源

2012-06-30 Alec Hewitt

關鍵是比較視口高度和文檔滾動高度，並相應地設置頁腳的位置（絕對或固定）。這是我敲的東西（jQuery假設）。

<head> 
    <script src='jquery.js'></script> 
    <script> 
    $(function() { 
     var footer = $('footer'), doc = document.documentElement || document.body; 
     footer.css('position', doc.scrollHeight <= $(window).height() ? 'absolute' : 'fixed'); 
    }); 
    </script> 
    <style> 
    body { margin: 0; } 
    section { height: 600px; margin-top: 50px; border: solid 1px; position: relative; padding: 10px 10px 40px 10px; } 
    footer { bottom: 0; width: 100%; height: 30px; background: red; left: 0; } 
    </style> 
</head> 
<body> 
    <section> 
     <h1>main content here</h1> 
     <footer></footer> 
    </section> 
</body>

來源

2012-06-30 23:35:28 Utkanos

感謝Utkanos，我現在都在努力。不過，我想知道如果你或其他人知道是否有辦法解決這個問題只與CSS？有點像我之前嘗試的解決方案？因爲我寧願不必使用Javscript，因爲我似乎總是有問題確保它在IE上運行。 –