有人可以帮我在网页中正确定位页脚吗？
我有以下布局：
这就是我希望页脚的行为方式：
- 当内容为空时，页脚应位于页面底部。
- 当内容超过页面高度时，页脚应该被“下推”。
这是我的 HTML：
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
@RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
@RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
请注意以下事项：
- 内容和标题包含在一个名为“page-container”的“Div”中。
- 内容由浮动在内容区域左右两侧的两个 div 组成。
- 菜单位于页面容器 div 之外。这是因为我希望菜单背景延伸到页面顶部（如 Stackoverflow 菜单）
我知道 Stackoverflow 上有很多类似的问题，而且 Google 搜索会返回大量结果。
我在尝试调整我发现的样本时注意到的一点是，它们通常依赖于与我的不匹配的非常特定的 html 结构（例如，除了页脚之外的所有内容都在容器中）。无论我尝试什么，我都会得到一些不起作用的东西（例如，当内容为空时，页脚位于屏幕边界下方，或者当内容超出页面时不会向下移动）。
更新
我可以让页脚贴在页面底部，但当我的内容展开时它不会被下推。我认为这是因为我的内容是由两个浮动元素组成的。
大多数人似乎将我指向他们在 Google 上找到的教程（如前所述，我已经阅读了其中的大部分内容并且已经尝试对其进行改编）。
我得出的结论是，我将不得不重组我的 HTML 以使其正常工作；我的问题的重点是如何使用我已经拥有的 HTML 来做到这一点？关注点分离就这么多！