HTML和CSS如何讓頁腳停留在頁面底部？

我的頁面底部有一個頁腳。當有足夠的內容時，頁腳被按下，直到您向下滾動到可見的位置。這很好，但是當頁面上沒有足夠的內容時，頁腳就不會在頁面上的某處滾動，但它不在底部。沒有足夠的內容時，如何讓頁腳位於頁面底部？這裏是我的代碼：HTML和CSS如何讓頁腳停留在頁面底部？

<html> 
<head> 
    <title>Omicrome</title> 
    //stuff 
</head> 
<body> 
    <div class = "container_24"> 
    <header> 
     //stuff  
    </header> 
     //stuff 
    </div> 
</body> 
    <div id = "rectangle"> 
     <center> 
     <a href="about" id = "footerbtn2">About</a> 
     <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a> 
     <a href="about" id = "footerbtn4">Contact</a> 
     </center> 
     <center><div id = "footerborder"></div></center> 
    </div> 
</html>

我的CSS：

body{ 
    background-image: url("../img/bg.jpg"); 
    background-repeat: repeat; 

} 
header{ 
    overflow: hidden; 

} 
.container_24{ 

    margin-left: auto; 
    margin-right: auto; 


} 
#rectangle { 
    float:bottom; 
    position: relative; 
    width: 100%; 
    height: 40px; 
    padding-top: 15px; 
    padding-bottom: 10px; 
    background: #404040; 
    top: 50%; 

}

來源

2016-11-09 user7133318

這是一個非常普遍的問題。在發佈之前嘗試使用Google搜索您的問題。 – marcusshep

body { 
position: relative; 
} 

#footerborder { 
position: absolute; 
bottom: 0; 
}

看看CSS定位！ Good Basic Explaination here.

來源

2016-11-09 19:40:30 topada

這是行不通的，因爲頁腳在底部，當您滾動時它停留在滾動過去。此外，即使內容太多，必須將頁腳向下滾動到最底部，我也希望頁腳位於頁面底部。邊界應該在最底部。 – user7133318

變化相對於absolute的位置，並刪除top:50%;

body{ 
 
    background-image: url("../img/bg.jpg"); 
 
    background-repeat: repeat; 
 

 
} 
 
header{ 
 
    overflow: hidden; 
 

 
} 
 
.container_24{ 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 

 

 
} 
 
#rectangle { 
 
    float:bottom;  
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 15px; 
 
    //padding-bottom: 10px; 
 
    background: #404040; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<div id = "rectangle"> 
 
     <center> 
 
     <a href="about" id = "footerbtn2">About</a> 
 
     <a href="privacy_policy.php" id = "footerbtn1">Privacy Policy</a> 
 
     <a href="about" id = "footerbtn4">Contact</a> 
 
     </center> 
 
     <center><div id = "footerborder"></div></center> 
 
    </div>

來源

2016-11-09 19:44:09

HTML和CSS如何讓頁腳停留在頁面底部？

回答

相關問題