CSS容器高度 [英] CSS Container Height

问题描述

侧栏应显示其容器的100％高度（＃content ），但由于未知原因，此内容区域没有任何高度，因此未显示侧边栏。

任何帮助都是值得赞赏的。

预先感谢，

Tom

以下是我的代码：
http://jsfiddle.net/tomperkins/G4f6u/

解决方案

这是一个外行的回答：问题是你有两个孩子< div> s都浮动，这意味着它们不在文档的常规流程中。这导致它们被排除在父母的高度计算之外，在这种情况下，< div> 带有classcontent。

你可以通过在风格clear：both中添加一个< div> （我相信）。这不是解决这个特定问题的最佳方式，因为它会在页面中添加非语义标记，但它很容易理解和实现。干杯！

编辑：参见 Container div忽略浮动元素的高度，然后按照答案中的链接阅读更多内容。

I have a layout that should have a sidebar on the right hand side of the content area.

The sidebar should display 100% height of its container (#content), but for an unknown reason this content area doesn't have any height, therefore the sidebar isn't appearing.

Any help is appreciated.

Thanks in advance,

Tom

Here's my code: http://jsfiddle.net/tomperkins/G4f6u/

解决方案

Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".

You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!

Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.

这篇关于CSS容器高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！