Question

我的页面底部有一个页脚。当有足够的内容时，页脚会被推到页面，直到您向下滚动它可见的位置。这很好但是当页面上没有足够的内容时，页脚可见而不在页面上的某个位置滚动但它不在底部的位置。当内容不足时，如何让页脚位于页面底部？这是我的代码：

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

}

Answer 1

body {
position: relative;
}

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

看看css定位！ Good Basic Explaination here.

Answer 2

将位置从相对位置更改为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如何使页脚保持在页面底部？

2 个答案: