CSS 高度问题 - 容器不会拉伸（无浮动）
这里有两个链接将显示我的问题： http://www.wontletthisbeatme.com/information.asp
在博客页面上，您将看到内容和容器 div 很好地延伸到底部，即使内容不需要那么多空间。这会将页脚放在底部，看起来不错。然而，在第二个链接中，信息超出了视点，并且容器 div 和页脚不会调整以容纳额外的内容。
这个问题我已经困扰了一段时间，但还没有真正掌握这个概念。我将 height:100% 放置在我的 html 和 body 元素以及我的容器上，但仍然发现自己对 CSS 中的页脚无效。我已经查看了网络上的许多链接和之前的帖子，但正如我所说，我无法理解这一点。任何帮助将不胜感激。
更新
我对页面做了一些调整。现在，我看到的最后一个问题是信息页面，其中内容 div 中包含的信息实际上并未向下拉伸 div。没有浮动，也没有理由我可以看到这个 div 不应该随着它的内容而拉伸。有什么建议吗？
Here at the two links that will display my problem:
http://www.wontletthisbeatme.com/information.asp
On the Blog page, you will see that the content and container divs stretch to the bottom nicely even though the content does not require that much space. This places the footer at the bottom and it looks fine. However, in the second link, the information stretches beyond the viewpoint and the container divs and footer do not adjust to accommodate the extra content.
This is an issue I have been having for a while and have yet to really grasp the concept. I have the height:100% placed on my html and body elements as well as my containers but still find myself ineffective with footers in CSS. I have reviewed many links on the web and prior posts but, like I said, cannot get my head around this. Any help would be greatly appreciated.
Update
I have done some tweaking to the pages. Now, the final issue I see is with the information page where the information contained within the content div does not actually stretch the div downward. There are no floats and no reason that I can see that this div should not stretch with its content. Any advice?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我认为这是因为 footerContainer 的 CSS 包含属性“position:absolute;”。删除它可以解决我的问题。
更新：如果您从中删除属性“height: 100%”，容器（即contentContainer）将正确拉伸。但同样，我没有分析整个布局。
I think it's because CSS for footerContainer contains the attribute "position: absolute;". Removing it fixes the issue for me.
UPDATE: The container (i.e. contentContainer) stretches correctly if you remove the attribute "height: 100%" from it. But again, I didn' analyze the whole layout.
这很可能是因为 footerContainer div 位置设置为 absolute
That is most probably because the footerContainer div position is set to absolute
您在页脚栏和导航栏上使用
position:absolute。为了解决这个问题，您需要停止在两者上使用它，以便导航栏可以将页脚栏向下推到页面上，而不是给它一个固定的位置。You are using
position:absoluteon the footer bar and the navigation bar. In order to fix this you need to stop using that on both so the navigation bar can push the footer bar down the page instead of giving it a fixed position.将 .footerContainer 设置为position:relative（或省略位置属性）
set the .footerContainer to position: relative (or leave out the position-attribute)
我目前不查看源代码的猜测是添加或删除了额外或缺失的
或标签...
My guess from not looking the source at the moment is an extra or missing
<div>or</div>tag was added or removed...使用如下；
并使用 .clear 作为
use as following;
and use the .clear as
您所描述的内容听起来与 在没有无关标记的情况下使页脚不会升到屏幕底部上方，我和最初的提问者 Jason Christa 都提出了可行的解决方案。该链接具有不使用包含
div的特殊要求，但我认为其中的概念应该在您的应用程序中有用。What you describe that you want sounds very similar to the problem expressed in Making a footer not rise above the bottom of the screen without extraneous markup in which both myself and the original asker, Jason Christa, came up with workable solutions. The link had the particular requirement of not using a containing
divbut I think the concepts from it should prove useful in your application.