Html CSS页脚麻烦-保持低调

我一直在开发一个新网站，这次使用CSS使它看起来更好。到目前为止它已经成功了？但是我现在被卡住了。我已经为页面底部（绝对底部，而不是固定底部）构建了一个页脚，但我无法让它保持向下。我在网上看过很多解决方案，但找不到解决问题的方案

我的页脚有一个100%的固定宽度和176像素的高度，所以剩下的就是迫使它停留在页面底部

在我的网页上，内容是按照以下顺序完成的

导航栏：无论滚动如何，导航栏都固定在屏幕顶部 幻灯片放映框：该选项设置为绝对值，并给出了最高值80px（导航栏高度+16px） 内容框：这是页面的大部分。它保存了页面的所有内容（所以对于我来说，它包含了关于这个人的详细信息）。它被设置为绝对值，并被赋予336px的最大值（导航栏的高度+16px+幻灯片框的高度+16px） 页脚

问题是，如果我有内容框的高度，整个情况就会解决，就像我可以做的那样

顶部：336px+内容框高度+16px

但是，我无法计算出来，因为内容框的高度根据网页的不同而不同。它可以从160px一直到1200px或更高

有人能想出办法解决我的问题吗？我把代码放在下面，这样你就可以看到我做了什么

我感谢所有的帮助！（正如你所知道的，我对CSS完全陌生。多亏了在线教程，我才有这么大的进步。）

---

这将使页脚保持在底部，而与窗口高度无关

<div id="footer">myfooter</div>

---

这就成功了！至少一个滚动页脚看起来不错！尽管有没有办法把它固定在页面底部而不是屏幕底部？

<div id="footer">myfooter</div>

#footer {
   position : absolute;
   bottom:0;
   width:100%;
   background-color:red;
   text-align:center;
}