页脚不在底部，而是在页眉下方答案

【问题标题】：The footer is not at bottom rather its just below the header页脚不在底部，而是在页眉下方
【发布时间】：2021-07-21 19:12:55
【问题描述】：

它粘在首页底部，但不在其他页面上。
我正在使用所有页面上的部分，主页上总共有 5 个部分，其他页面上各 1 个。
我是编码初学者，所以请帮我解决这个问题。
点击here查看有问题的视频

.copyright p{
    margin: 0;
    font-size: 15px;
}
.copyright{
    padding: 100px;
    color: white;
}
.footlogo{
    padding: 20px;
    width: 300px;
    cursor: pointer;
    align-items: center;
}
.navfoot{
    padding: 20px;
    display: flex;
    position: relative;
    justify-content: center;

}
.foot-btn{
    display: inline;
    padding: 10px;
    color: white;
    text-underline-position: 3px;
    transition: 0.2s;
}
.foot-btn:hover{
    color: #a200ff;
    transform: translateY(-5px);
    transition: 0.2s;
}
footer{
    position: relative;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background: #171724;
    max-height: 10cm;
    align-content: center;
    overflow: hidden;
}
.call{
    display: inline;
    justify-content: space-around;
}

            <footer>
                <div class="call">
                    <div class="copyright">
                        <img src="Images/Banner.png" class="footlogo">
                        <p><span>&#169;</span> Copyright 2021 proudly created by Darshan Daiv</p>
                        <div class="navfoot">
                            <a href="Website.html" class="foot-btn">Home</a>
                            <a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
                            <a href="Aboutme.html" class="foot-btn">About Me</a>
                            <a href="Portfolio.html" class="foot-btn">Portfolio</a>
                            <a href="Contact.html" class="foot-btn">Contact</a>
                        </div>
                    </div>
                </div>
            </footer>

【问题讨论】：

请分享更多代码。您可以将标题和正文添加到 sn-p（或至少每个示例）。
html{ position: relative; min-height: 100%; scroll-behavior: smooth; cursor: none; height: 100%; } .body{ height: 100%; margin: 8%; }

标签： html css footer sections

【解决方案1】：

您可以在<html> 标签上使用min-height，并将<footer> 与position:absolute 放在一起；

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

.copyright p{
    margin: 0;
    font-size: 15px;
}
.copyright{
    padding: 100px;
    color: white;
}
.footlogo{
    padding: 20px;
    width: 300px;
    cursor: pointer;
    align-items: center;
}
.navfoot{
    padding: 20px;
    display: flex;
    position: relative;
    justify-content: center;

}
.foot-btn{
    display: inline;
    padding: 10px;
    color: white;
    text-underline-position: 3px;
    transition: 0.2s;
}
.foot-btn:hover{
    color: #a200ff;
    transform: translateY(-5px);
    transition: 0.2s;
}
footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background: #171724;
    max-height: 10cm;
    align-content: center;
    overflow: hidden;
}
.call{
    display: inline;
    justify-content: space-around;
}

<footer>
                <div class="call">
                    <div class="copyright">
                        <img src="Images/Banner.png" class="footlogo">
                        <p><span>&#169;</span> Copyright 2021 proudly created by Darshan Daiv</p>
                        <div class="navfoot">
                            <a href="Website.html" class="foot-btn">Home</a>
                            <a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
                            <a href="Aboutme.html" class="foot-btn">About Me</a>
                            <a href="Portfolio.html" class="foot-btn">Portfolio</a>
                            <a href="Contact.html" class="foot-btn">Contact</a>
                        </div>
                    </div>
                </div>
            </footer>

【讨论】：

我试过你的方法，但它只移动到主要部分上方（在标题上）查看区别relative和absolute
嘿，问题解决了！ IDK 为什么但是，问题出在上面部分的位置，它是绝对位置，我将其更改为相对位置，现在已解决。但是为什么页脚上方的部分会改变它的位置呢？！

【解决方案2】：

我会坚持使用像素而不是 cm，就像你使用 max-height 所做的那样。

如果您首先将您的身体设置为身高：100%；像这样：

body{
    height:100%;
{

，然后您可以将页脚设置为（例如）20px。然后你可以添加一个最小高度 calc(100vh - 10px)。

.footer{
    min-height: calc(100vh - 20px);
}

此链接解释了很多内容并为您提供了其他选项： https://css-tricks.com/couple-takes-sticky-footer/

【讨论】：

嘿，问题解决了！ IDK为什么但是，问题出在上面部分的位置，它是绝对位置，我把它改成了相对位置，现在已经解决了。但是为什么页脚上方的部分会改变它的位置呢？！
相对定位接近静态。这意味着设置右侧和底部存在问题。我不确切知道是什么原因导致它或为什么有时会解决它，但它确实发生了。不要使用固定定位。 Fixed 将标题设置为相对于窗口，而不是页面。我看到您希望您的标题在您到达页面底部时位于页面底部。并非一直如此。

【解决方案3】：

您可以在页脚上使用position: absolute 并稍微减小其宽度。请注意，此定位将使元素的父级无法计算元素（例如，它的高度不会改变）。代码：

  .copyright p{
  margin: 0;
  font-size: 15px;
  }
  .copyright{
  padding: 100px;
  color: white;
  }
  .footlogo{
  padding: 20px;
  width: 300px;
  cursor: pointer;
  align-items: center;
  }
  .navfoot{
  padding: 20px;
  display: flex;
  position: relative;
  justify-content: center;

  }
  .foot-btn{
  display: inline;
  padding: 10px;
  color: white;
  text-underline-position: 3px;
  transition: 0.2s;
  }
  .foot-btn:hover{
  color: #a200ff;
  transform: translateY(-5px);
  transition: 0.2s;
  }
  footer{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    color: white;
    text-align: center;
    background: #171724;
    max-height: 10cm;
    align-content: center;
    overflow: hidden;
  }
  .call{
  display: inline;
  justify-content: space-around;
  }

<footer>
  <div class="call">
      <div class="copyright">
          <!--Removed the image because it was using space-->
          <p><span>&#169;</span> Copyright 2021 proudly created by Darshan Daiv</p>
          <div class="navfoot">
              <a href="Website.html" class="foot-btn">Home</a>
              <a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
              <a href="Aboutme.html" class="foot-btn">About Me</a>
              <a href="Portfolio.html" class="foot-btn">Portfolio</a>
              <a href="Contact.html" class="foot-btn">Contact</a>
          </div>
      </div>
  </div>
</footer>

【讨论】：

我试过你的方法，但它只移动到主要部分上方（在标题上）查看区别relative和absolute
嘿，问题解决了！ IDK 为什么但是，问题出在上面部分的位置，它是绝对位置，我将其更改为相对位置，现在已解决。但是为什么页脚上方的部分会改变它的位置呢？！

【解决方案4】：

footer 应定位为 fixed 而不是 relative

【讨论】：

但是页脚总是在屏幕上，我希望它在底部。

【解决方案5】：

页脚的位置应该是“固定的”并尝试 margin-top: auto;太

.copyright p{
    margin: 0;
    font-size: 15px;
}
.copyright{
    padding: 100px;
    color: white;
}
.footlogo{
    padding: 20px;
    width: 300px;
    cursor: pointer;
    align-items: center;
}
.navfoot{
    padding: 20px;
    display: flex;
    position: relative;
    justify-content: center;

}
.foot-btn{
    display: inline;
    padding: 10px;
    color: white;
    text-underline-position: 3px;
    transition: 0.2s;
}
.foot-btn:hover{
    color: #a200ff;
    transform: translateY(-5px);
    transition: 0.2s;
}
footer{
       position: fixed; 
       margin-top:auto;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background: #171724;
    max-height: 10cm;
    align-content: center;
    overflow: hidden;
}
.call{
    display: inline;
    justify-content: space-around;
}

            <footer>
                <div class="call">
                    <div class="copyright">
                        <img src="Images/Banner.png" class="footlogo">
                        <p><span>&#169;</span> Copyright 2021 proudly created by Darshan Daiv</p>
                        <div class="navfoot">
                            <a href="Website.html" class="foot-btn">Home</a>
                            <a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
                            <a href="Aboutme.html" class="foot-btn">About Me</a>
                            <a href="Portfolio.html" class="foot-btn">Portfolio</a>
                            <a href="Contact.html" class="foot-btn">Contact</a>
                        </div>
                    </div>
                </div>
            </footer>

【讨论】：

但页脚总是停留在屏幕上
它确实在它的位置上，但我不希望它一直停留在屏幕上
嘿，问题解决了！ IDK 为什么但是，问题出在上面部分的位置，它是绝对位置，我将其更改为相对位置，现在已解决。但是为什么页脚上方的部分会改变它的位置呢？！