Question

我的布局应该在内容区域的右侧有一个侧边栏。

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

感谢任何帮助。

提前致谢，

汤姆

Answer 1

您对{* 1}}周围的所有元素使用height: 100%，因此它继承了html元素的大小。因为它没有指定任何大小，所以任何孩子都不依赖它。

使用此选项可使html和body元素填充窗口：

html, body { height: 100%; }

Answer 2

我做了一些改变处理侧边栏的位置 - 我改为绝对并添加了一个最小高度，这样如果它的内容是空的，它仍然是可见的。

不确定这是否是你想要的 - 但它可能会有所帮助。

Answer 3

在.content上设置静态高度（以px为单位），您将看到侧边栏

Answer 4

这是一个外行人的答案：问题是你有两个孩子<div>，它们都是浮动的，这意味着它们不在文件的常规流程之内。这会导致它们被排除在其父级的高度计算之外，在本例中为<div>，其类为“content”。

您可以通过在样式为<div>的两个浮点数之后添加"clear:both"来解决此问题（我相信）。这不是修复此特定问题的“最佳”方法，因为它向您的页面添加了非语义标记，但它很容易理解和实现。干杯！

修改：请参阅Container div ignores height of floated elements，然后按照答案中的链接阅读更多内容。