Question

我到处寻找，似乎无法找到答案 - 显然我做错了什么。这是我的页脚css：

#footer { 
   position: fixed; 
   bottom: 0px;
   left: 0px;
   margin: 0px;
   width: 100%;
   height: 60px;
   padding-top : 10px;
   background-image:url(../images/bottom_bg.jpg);
   background-repeat:repeat;
   text-align:center;
   border-top: 5px solid #000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFCC66;
}

www.bevwebdev.com/examples.php

我到底做错了什么？我已经尝试过z-index，设置高度仅适用于表格，位置：绝对只是将它粘在我较短页面的中间 - 真是令人头疼！

Answer 1

问题是当您向下滚动时，页脚会覆盖主容器的底部。解决方案是为container div添加底部边距。

#container {
  margin-bottom: 100px;
}

这会在div下方放置100px的空白，因此，当位于页面的最底部时，所有文本仍会显示。

Answer 2

如果您始终希望页脚低于其他所有内容，则应使用position: relative

如果您始终希望将页脚固定在浏览器底部，则应使用position: fixed

如果您始终希望页脚与其他元素或页面顶部保持一定距离，则应使用position: absolute

Answer 3

如果您希望页面底部不隐藏在页脚下，请添加此CSS：

body {
    padding-bottom:100px;  
}

或某些适合您的号码。这会将身体内容提升一点，以便你可以看到它。

页脚CSS定位

3 个答案: