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，但是当页面的高度增加时，页脚会停留在那里。当我改变位置：固定，这是有效的，但当我向上/向下滚动时页脚会翻过评论，但我希望它始终保持在底部。当我删除定位时，它可以解决问题，它总是停留在页面的底部但是它会导致将背景颜色，边框，边框半径等应用到所有页面，我不希望这样做发生。我希望代码仅适用于页脚。

我想听听一些意见。谢谢你！

编辑！以下是影响页脚的其余CSS;

＆＃13;

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;

＆＃13;

Answer 1

您应该为html元素设置min-height: 100%，这将适当地设置the stacking context，允许您的代码正常工作。你应该为它设置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'); }。我在下面创建了一个简单的测试器，当你单击按钮时，randoly会改变内容的高度。试一试，让我知道你的感受！

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>

{{1}}

页脚不会留在应该的位置

1 个答案: