html - 两列相同高度嵌套在另外两列相同高度中

Question

我正在开发一个 MVC 应用程序，并且在 HTML/CSS 布局方面遇到了一些关于我们拥有的部分的问题。

应用程序的外壳包含两列，它们扩展为内容最多的列的高度。左列包含应用程序的导航。右栏是内容区域。

我已经设法让这部分正常工作。

我遇到的问题是，对于某些页面，内容区域（右列）需要分成两列。我需要这两列来决定内容区域的高度，这反过来又决定了主导航的高度。

任何输入都会非常有用！谢谢！

编辑我让它工作了，但对解决方案并不完全满意。它要求我使用读取空白的内联块。结果，我使用了两行注释策略，但我担心这会在事后编辑/清理项目时被某人删除。

http://jsfiddle.net/StSmith/RzKJX/

.

Answer 1

我想，如果您只是添加列，它们会自动填充空间，从而决定“内容”的高度。

但是，如果您浮动列，则包含元素将不会增加它们的高度。在这种情况下，您需要添加列下方的已清除元素，或者最好添加“clearfix”。