2

我的目标：拥有一个具有固定、静态页脚的主页。解释这一点的最简单方法是查看这个网站，http://www.foxtie.com/。我正在尝试像他们对狐狸所做的那样，坚持页脚，只是，我希望整个页脚永远不会从实际屏幕的底部移动。

我的代码：我已经改变了，没有改变，又重新改变了这一切。所以我可能比一小时前多 20 步。这就是我所拥有的。（忍受我，第一次在这里发帖，我对 html/css 很生疏）。

任何帮助表示赞赏。

的HTML：

<html>
<body>
<div id="container">
  <div id="nav"></div>
  <div id="content"></div>
  <div id="footer">
    <div id="imginthefooter"></div>
  </div>
</div> 
</body>
</html>

CSS：

body    {
    height: 100%;
    margin: 0px;
}

html {
    background-color: #999;
    margin: 0px;
    height: 100%;
}

#container {
    min-height: 100%;
    background-color: #666;
    position: relative;
}

#content    {
    overflow: auto;
    background-color:#333;
}


#footer {
    background-color:#000;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height:100px;
    overflow: hidden;       
}

#imginthefooter {       
    background: url(Images/Elk.png);
    width:100px;
    height:300px;
    z-index:300;
    bottom: 0px;
    top: -108px;
    right: -150px;
    position: relative;
}
4

1 回答 1

1

Alien 先生在他的评论中提供的链接是用于粘性页脚的。如果您希望页脚出现在屏幕底部而不考虑页面上的内容量，这将非常有用。我认为您真正想要的是页脚始终出现在页面底部。这意味着如果您向下滚动，页脚将保持在原位。如果是这种情况，您需要以下代码：

#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100px;
}

固定位置会将页脚永久放置在屏幕底部。要在页脚中添加固定图像，您将需要相对 div 和绝对 div。以下代码将为您提供所需的内容。

​&lt;div id="footer">
  <div id="footerContainer">
    <div id="imginthefooter"></div>

    . . . Any additional footer elements go here . . .

  </div>
</div>​​​​​​​​​

#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100px;
}

#footerContainer {
    position:relative;
    width:100%;
    height:100px;
}

#imginthefooter {       
    background: url(Images/Elk.png) no-repeat;
    width:100px;
    height:300px;
    top: -108px;  /* Position element */
    right: 150px; /* Position element */ 
    position: absolute;
}​​​​​​​​​

固定元素中的相对容器将允许您相对于该容器定位麋鹿图像。

于 2012-10-07T07:08:08.137 回答