如何创建一个相对定位的页脚

Question

我想像所有其他页脚一样制作页脚。深底并留在那里。但另一方面，我希望它的顶端可以扩展，具体取决于div.content的位置。它可能是像10px那样的常数值。因此，如果div.content移动到顶部，它会移动到（同时仍然将屏幕底部保持为页脚）。我怎么能这样做？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解你的问题，你想要将页脚放在屏幕的底部，无论如何。正确的吗？

为此，请将以下内容添加到页脚类中。

    position: fixed;
    bottom: 0;