如何使布局100％高度

Question

如何制作100％高度的简单布局（侧边栏+内容）？

请参阅我的源代码：http://codepen.io/adilson/pen/kiHsd

显然，布局似乎是100％的高度，但在调整浏览器大小并打开＆＃34;菜单项10＆＃34;很明显它不是。

另一个问题是列＆＃34;侧栏＆＃34;边框不会出现在页面底部。

修改 我不希望在侧边栏上有一个滚动条，我试图做的是让布局100％高度，如果打开菜单自动展开布局。

以下是我尝试做的一个例子：http://www.keenthemes.com/preview/metronic/layout_blank_page.html

我只是不想要这个模型的页眉和页脚，但其余的正是我想要做的。

Answer 1

您可以向#sidebar添加overflow：auto。

#sidebar{overflow:auto;}

这会自动溢出事物。

Answer 2

原因是您的滚动条高度超过100％。

您可以使用containers：

使它们的高度相同

这是jsFiddle示例。

Answer 3

有一些解决方案。一种是滚动侧面导航。另一种是限制子菜单的高度并改为滚动它们。为此，请按以下步骤更新您的CSS：

#sidebar ul li ul{max-height:230px;overflow:auto;}

您可能希望尝试嵌套列表项的最大高度值，直到获得所需的外观。

要在缩小屏幕尺寸时使侧边栏滚动，请添加以下内容，

#sidebar {left: 0;bottom:0;top:0;width: 255px; background: #111; border-right:#000 solid 3px;overflow-y:auto;}

添加顶部和底部位置将确保您的侧边栏保持在原位并占据文档高度的100％。

希望这有帮助