在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中有靜態圖像的靜態頁腳？

回答

相關問題