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

}

这是一个非常普遍的问题。在发布之前尝试使用Google搜索您的问题。 – marcusshep

答

body { 
position: relative; 
} 

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

看看CSS定位！ Good Basic Explaination here.

这是行不通的，因为页脚在底部，当您滚动时它停留在滚动过去。此外，即使内容太多，必须将页脚向下滚动到最底部，我也希望页脚位于页面底部。边界应该在最底部。 – 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>

HTML和CSS如何让页脚停留在页面底部？

相关推荐