Question

我的目标：拥有一个具有固定静态页脚的主页。最简单的解释方法是查看此网站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;
}

Answer 1

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

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

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

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

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

CSS中的静态图片静态页脚？

1 个答案: