Html 页脚不在主页的底部

我尝试了几种方法来对齐底部的页脚，但是我没有找到任何解决方案。我应该用什么方法来解决这个问题

    <footer>
      <div class="container">
        <nav class="footer-nav">
          <ul>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
        <nav class="footer-nav">
          <ul>
            <li>
              <a href="#" class="social-link">
                <img src="/img/iconmonstr-facebook-2.svg" alt="" />
                Facebook
              </a>
            </li>
            <li>
              <a href="#" class="social-link">
                <img src="/img/iconmonstr-instagram-11.svg" />
                Instagram
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </footer>  

---

将样式添加到页脚元素：

style="position:absolute; bottom:0px"

---

您可以使用avi推荐的

position:absolute

， 但我通常建议尽可能不要绝对

这也可以使用flexbox解决。 将“弯曲方向”设置为“柱状”， 并在要占用所有空间的主要部分上设置

flex:1

（通常不希望页眉和页脚展开）

html，正文{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
标题{
背景色：红色；
}
主要{
弹性：1；
背景颜色：绿色；
}
页脚{
背景颜色：蓝色；
}

---

header请显示您的代码请添加一个显示页脚不在页面底部的图标。HTML中没有任何内容表明它应该位于底部。堆栈溢出不是用来猜测的。（即使是这样，我们仍然会向您指出您已经尝试过但不适用于您的解决方案。）尝试为您的身体设置最低高度
100vh
，或者将您的
footer
设置为
位置：绝对和
底部：0。我尝试过这个方法，先生，但它不会停留在bottom@LanzeIvan这是因为页脚中有引导容器？尝试将其移除或在容器上设置位置。
style="position:absolute; bottom:0px"