css - 如何使布局 100% 高度

Question

如何使简单的布局 100% 高度（侧边栏 + 内容）？

显然布局似乎是高度的 100%，但是当调整浏览器大小并打开“菜单项 10”时，很明显不是。

另一个问题是“侧边栏”栏的边框不会到达页面底部。

编辑： 我不想在侧边栏上有一个滚动条，我想做的是让布局 100% 高度，如果打开的菜单自动扩展布局。

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

score 0 · Accepted Answer

您可以在#sidebar 中添加一个溢出：自动。

#sidebar{overflow:auto;}

这会自动溢出东西。

score 0 · Accepted Answer

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

您可以使用以下方法使它们的高度相同containers：

这是jsFiddle示例。

score 0 · Accepted Answer

有几个解决方案。一种是滚动侧面导航。另一种是限制子菜单的高度并滚动它们。为此，请按如下方式更新您的 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%。

希望这可以帮助

3 回答 3