html - 如何创建相对定位的页脚

Question

我想像所有其他页脚一样制作页脚。深底并留在那里。但另一方面，我希望它的顶部可以根据 div.content 的位置进行扩展。它可能是像 10px 这样的常量值。因此，如果 div.content 移动到顶部，它就会移动到(同时仍将屏幕底部保持为页脚)。我该怎么做？

.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
}
.left-content {
  float: left;
  margin: 2.27272727272727%;
  /* 20/880 = 0.0227272727272727 */
  width: 56.81818181818182%;
  /* 500/880 = 0.5681818181818182 */
  background-color: aquamarine;
}
.right-content {
  float: left;
  margin: 2.27272727272727%;
  /* 20/880 = 0.0227272727272727 */
  width: 34.09090909090909%;
  /* 300/880 = 0.3409090909090909 */
  background-color: mediumturquoise;
}
.inner-content {
  float: left;
  margin: 2%;
  /* 10/500 = 0.02 */
  width: 44%;
  /* 220/500 = 0.44 */
  background-color: darkgreen;
}
.footer {
  clear: both;
  height: 10%;
  bottom: 0px;
  width: 100%;
  position: absolute;
  background-color: darkcyan;
}

<div class="main">
  <div class="content">
    <div class="left-content">
      <h1>A</h1>
      <p>asd</p>
      <p>asd</p>
      <p>asd</p>
      <p>asd</p>
      <p>asd</p>
      <div class="inner-content">
        <h1>D</h1>
      </div>
      <div class="inner-content">
        <h1>D</h1>
      </div>
    </div>
    <div class="right-content">
      <h1>B</h1>
      <p>asd</p>
      <p>asd</p>

    </div>
  </div>
  <div class="footer">
    <h1>C</h1>
  </div>
</div>

Answer 1

如果我对您的问题的理解正确，您无论如何都希望将页脚保留在屏幕底部。正确吗？

为此，将以下内容添加到您的页脚类。

    position: fixed;
    bottom: 0;