html - 页脚不在应有的位置

Question

我试图在我的网站底部制作一个页脚，我确实做了，但没有停留在我想要的位置。我使用的原始 CSS 代码是这样的:

background-color: rgba(0, 0, 0, 0.7);
border: 2px solid black;
border-radius: 5px;
padding: 10px;
width: 1270px;
position: absolute;
color: white;
bottom: 0px;
display: block;
font-size: smaller;
text-align: center;

但是每当有人发送评论时，我的页面高度就会增加。所以我知道这里的问题是什么。当我添加 bottom: 0px 时，它始终保持在 0px，但是当页面的高度增长时，页脚保持在那里。当我改变 position: fixed 时，那行得通，但是当我向上/向下滚动时，页脚会越过评论，但我希望它始终保持在底部。当我删除定位时，它起到了作用，它始终停留在页面的底部，但随后它导致将背景颜色、边框、边框半径等应用到所有页面，我不希望这种情况发生。我希望代码仅适用于页脚。

我想听听一些建议。已经谢谢你了!

编辑!这是影响页脚的其余 CSS；

h1, .h1 {
    font-size: 39px;
}
darkly.min.css:14
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 0;
    margin-bottom: 10.5px;
}
darkly.min.css:14
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: inherit;
}
darkly.min.css:14
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
darkly.min.css:14
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
Inherited from body
darkly.min.css:14
body {
    font-family: "Source Sans Pro",sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: white;
    background-attachment: fixed;
    background-image: url(https://steamuserimages-a.akamaihd.net/ugc/491274240789482793/1CEE148DBE320A9367BCDF5211AE077E695A4CFE/);
    text-transform: lowercase;
    margin: 0 auto;
    width: 1280px;
}
Inherited from html
darkly.min.css:14
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
darkly.min.css:14
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
darkly.min.css:14
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
darkly.min.css:14
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Answer 1

您应该为 html 元素设置 position: relative，这将设置 the stacking context适本地，让你的代码工作。你还应该为它设置 min-height: 100%，当你在它的时候。我在下面创建了一个简单的测试器，它会在您单击按钮时随机更改内容的高度。试试看，让我知道您的感受!

var height = 100;

function updateHeight() {
  if (height >= 100)
    height = (50 * Math.random());
  else
    height = (75 + 50 * Math.random());
  document.getElementById("variable-height").setAttribute('style', 'height: ' + height + 'vh');
}

html {
  position: relative;
  min-height: 100%;
}

footer {
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  width: 1270px;
  position: absolute;
  color: white;
  bottom: 0px;
  display: block;
  font-size: smaller;
  text-align: center;
}

<div id="variable-height" style="height: 100vh;">
  <button onclick='updateHeight()'>Click me to test!</button></div>
<footer>Footer</footer>