在CSS中有静态图像的静态页脚？

我的目标：有一个主页，它有一个固定的，静态页脚。最简单的解释方法就是看这个网站，http://www.foxtie.com/。我试图做一些像狐狸一样的事情，坚持使用页脚，但是我希望整个页脚不会从实际屏幕的底部移动。在CSS中有静态图像的静态页脚？

我的代码：我已经改变了，没有改变，并且重新改变了它。所以我可能比一个小时前更远了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; 
}

来源

2012-10-07 user1041114

你需要这个http://ryanfait.com/sticky-footer/ –

的联系，在他的评论中提供外国人先生是粘页脚。如果您希望页脚出现在屏幕的底部而不管页面上的内容量如何，这很有用。我认为你真正想要的是页脚始终出现在页面的底部。这意味着如果向下滚动，页脚就会保持原位。如果是这种情况，您需要下面的代码：

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

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

来源

2012-10-07 07:08:08 VictorKilo

真棒 - 这样照顾我的问题之一。谢谢。我现在只需要知道如何放置留在页脚中的图像呢？ – user1041114

@ user1041114 - 我已经更新了我的答案，包括麋鹿的定位。 – VictorKilo

在CSS中有静态图像的静态页脚？

回答

相关问题