即使在较小的页面上，如何使版权页脚保留在底部

Question

//CSS

footer {
    position: relative;
    height: 300px;
   width: 100%;
  }
p.copyright {
    position: absolute;
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}

//HTML

<footer>
  <p class="copyright">&copy Copyright 2022</p>
</footer>

我的问题是版权标志使我的单页变得更长，我猜是由于页脚的高度 - 但是每当我减少这个时，它就会将版权标志扔到页面中间，并留出一个空白部分下。无论页面大小如何，如何使我的版权保留在底部中间？

Answer 1

删除相对位置和绝对位置

footer {
    height: 300px;
   width: 100%;
  }
p.copyright {
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}

Answer 2

将 Flex 显示到中心，删除高度添加另一个 div，将段落放置在底部

CSS：

    footer {
      display: flex;
      justify-content: center;
      margin-top: auto;
    }
    p.copyright {
      margin: 10px;
    }
    body{
      min-height: 100vh; 
      display: flex; 
      flex-direction: column;
      margin: 0;
    }

至于 html 侧

  <footer>
    <p class="copyright">© Copyright 2022</p>
  </footer>

已更新