有人可以帮我在网页中正确定位页脚吗？
我有以下布局:
这就是我希望页脚的行为方式:
- 当内容为空时，页脚应位于页面底部。
- 当内容超过页面高度时，页脚应“下推”。
这是我的 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”中。
- 内容由 float 在内容区域左侧和右侧的两个 Div 组成。
- 菜单位于页面容器 div 之外。这是因为我希望菜单背景延伸到页面顶部(就像 Stackoverflow 菜单一样)
我知道 Stackoverflow 上有很多类似的问题，Google 搜索会返回大量结果。
我在尝试调整我发现的样本时注意到的一件事是，它们通常依赖于与我的不匹配的非常具体的 html 结构(例如，除了页脚之外的所有内容都在容器中)。无论我尝试什么，我最终都会得到一些不起作用的东西(例如，当内容为空时，页脚位于屏幕边界下方，或者当内容超出页面时，页脚不会向下移动)。
更新
我可以让我的页脚贴在页面底部，但当我的内容展开时它不会被压下。我认为这是因为我的内容由两个 float 元素组成。
大多数人似乎将我指向他们在 Google 上找到的教程(如前所述，我已经阅读了其中的大部分内容并已尝试对其进行改编)。
我得出的结论是，我将不得不重组我的 HTML 以使其正常工作；我的问题是如何使用已有的 HTML 执行此操作？关注点分离到此为止!
最佳答案
快速谷歌搜索给了我一些你会发现有用的链接。
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
我会坚持第一个，但两者都应该做你想做的。
关于html - 如何使用 CSS 正确定位页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11955440/