在所有设备上查看时让页脚停留在底部？

Question

当我在移动设备上查看网站时，页脚 div 位于页面的中间（在我的台式 PC 上位于底部）。

还没有确定从哪里开始。在页脚的 CSS 中尝试 position:absolute; 无济于事。

CSS

#footer {
    width:1460px;
    height:80px;
    background-color:#FF0;
    font-weight: bold;  
}

HTML

<div id = "footer"> <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    function scrollToBottom() {
        $('html, body').animate({scrollTop:$(document).height()}, 
'slow');
    }
    function scrollToTop() {
        $('html, body').animate({scrollTop:0}, 'slow');
    }
</script>
<a href="javascript:scrollToTop()"><img src="images/scroll.png" 
alt="Scroll to Top" title="Scroll to Top" width="42" height="37" 
hspace="65" vspace="20" />                 </a><a 
href="http://www.facebook.com/woodzyweb" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Woodzy','','images/wwd_roll.png',1)"><img 
src="images/wwd.png" alt="Visit Our web Designer Facebook Page" 
name="Woodzy" width="150" height="47" border="0" id="Woodzy" /> 
</a>website designed by:</div>

没有我知道的错误消息；只是希望将页脚固定到底部。

Answer 1

有几种方法可以解决，您可以将#footer css 更改为：

#footer {
    width:1460px;
    height:80px;
    background-color:#FF0;
    font-weight: bold;
    position: absolute;
    bottom: 0; 
}

您还可以将包含页脚上方所有内容的 div 设置为视口的最小高度：

#container {
    min-height: 100vh;
}