html - 如果网页上除了单个标题之外没有其他内容，如何将文本保留在页脚附近

Question

我试图让我的 h1 保持在页脚附近而不在页眉上使用 margin-bottom 以便我的文本将保持在页脚附近 我想要这样的东西 在此处输入图像描述

我尝试过的解决方案是通过将 margin-bottom:515px 提供给标题，以便它保持在底部，但如果我知道任何更好的方法来实现这件事，我将不胜感激

标签： htmlcss

Answer 1

由于重叠问题，无法推荐绝对位置。Flex 会施展魔法。

body,
html {
  margin: 0;
}

.header {
  align-items: flex-end;
  background-color: red;
  display: flex;
  height: calc(100vh - 100px);
}

h1 {
  margin: 0 0 50px;
}

.footer {
  align-items: center;
  background-color: blue;
  color: white;
  display: flex;
  height: 100px;
  width: 100%
}

p {
  margin: 0;
}

<div class="header">
  <h1>H1 goes here</h1>
</div>
<div class="footer">
  <p>footer goes here</p>
</div>