将页脚固定到页面底部（无 header）

Question

我还在学习 CSS，我还不太好，如果你能找到解决这个问题的方法，你能提供一个例子来说明我要把新 CSS 或删除。我现在已经尝试了至少 30 种不同的方法，但找不到有效的方法。

我的屏幕没有居中的文本 header 但我想强制第二个文本位于其下方。

这是一张有助于展示我的设置的图片：

这是我让文本居中的一些代码（我想尽可能不受影响，这样居中的文本和页脚都可以正常工作）

<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

这是我开始的 CSS：

.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.footer {
  position:fixed; 
  bottom:0; 
  clear:both; 
  height:75px; 
}

就像我说的，居中的文本即使在我调整页面时也能正常工作，它仍然保持居中，我只想在它下面有一个页脚，它会固定在底部。感谢您的帮助，非常感谢~

Answer 1

你已经做到了！

.footer {
    position: fixed;
    bottom: 0;
    clear: both;
    height: 75px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: fixed;
  bottom: 0;
  clear: both;
  height: 75px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
}

<div class="centered">
  <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

Answer 2

方法一：

据我所知（如果我错了请原谅）你应该有一个亲戚来使用绝对。至于你想要居中的文本，你可以通过使用你想要放置它的内部部分来完成它。我使用了填充，因为我这里没有内部部分。

.centered {
text-align: center;
padding-top: 80px;
position: relative;
}

.footer {
position: absolute;
clear: both;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}

<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

方法二：您也可以通过 flexbox，因为它具有较少的属性、易于使用并且响应迅速。

将页脚固定到页面底部（无 header）

Fix footer to bottom of page (no header)

html

css

css-position

footer