使用浮动后，页脚不会停留

Question

我正在开发一个快速响应的网站。我尝试了一切，我的页脚不会停留下来。这是因为我使用了float：left。我不希望它被修复，我希望它只在我滚动到页面底部时出现。这是我的代码：

编辑：好吧所以我采取了立场：绝对出局，现在它适用于之前没有的页面。但在我没有使用浮动的页面上：左边它不再起作用了。

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.2em;
  background-color: #24478f;
  color: black;
  text-align: center;
  font-family: Calibri;
  font-size: 4vw;
  max-width: 100%;
  clear: both;
}

#container figure {
  width: 100%;
  float: left;
  display: block;
  overflow: hidden;
}

... 
@media only screen and (min-device-width: 1000px) {
  #container figure {
    width: 33%;
    display: block;
    overflow: hidden;
  }
}

<section id="container">
  <figure>
    <a href="Portfolio.html#applications">
      <img src="../imgs/74599-200.png">
    </a>
    <figcaption>Multimedia Applications</figcaption>
  </figure>
  <figure>
    <a href="Portfolio.html#retrieval">
      <img src="../imgs/info1600.png">
    </a>
    <figcaption>Information Retrieval</figcaption>
  </figure>
  <figure>
    <a href="Portfolio.html#games">
      <img src="../imgs/3281-200.png">
    </a>
    <figcaption>Computer Games</figcaption>
  </figure>
</section>

<footer>
    <p> Infia Abelha</p>
</footer>

Answer 1

删除位置：绝对并且有效

footer {
  width: 100%;
  height: 1.2em;
  background-color: #24478f;
  color: black;
  text-align: center;
  font-family: Calibri;
  font-size: 4vw;
  clear: both;
}

#container figure {
  width: 100%;
  float: left;
  display: block;
  overflow: hidden;
}

... 
@media only screen and (min-device-width: 1000px) {
  #container figure {
    width: 33%;
    display: block;
    overflow: hidden;
  }
}

<section id="container">
  <figure>
    <a href="Portfolio.html#applications">
      <img src="../imgs/74599-200.png">
    </a>
    <figcaption>Multimedia Applications</figcaption>
  </figure>
  <figure>
    <a href="Portfolio.html#retrieval">
      <img src="../imgs/info1600.png">
    </a>
    <figcaption>Information Retrieval</figcaption>
  </figure>
  <figure>
    <a href="Portfolio.html#games">
      <img src="../imgs/3281-200.png">
    </a>
    <figcaption>Computer Games</figcaption>
  </figure>
  <div style="clear:both;"></div>
</section>

<footer>
    <p> Infia Abelha</p>
</footer>

Answer 2

为了做到这一点，你可以使用min-height作为你的部分

#container{min-height:500px}    

并将页脚位置设置为相对

footer{position:relative}