如何使布局 100% 高度答案

【问题标题】：How make layout 100% height如何使布局 100% 高度
【发布时间】：2013-05-07 02:32:58
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css layout

【解决方案1】：

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

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

这是jsFiddle 示例。

【讨论】：

【解决方案2】：

您可以在#sidebar 中添加一个overflow:auto。

#sidebar{overflow:auto;}

这会自动溢出东西。

【讨论】：

【解决方案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%。

希望对你有帮助

【讨论】：

lukeocom，我想避免侧边栏的滚动。我在初始消息中添加了一个示例。
设计之间的区别在于您尝试使用 100% 的相对高度。您提供的示例使用 947px 的固定高度...您可能希望将以下内容添加到您的 css。 #container{height:800px;background-color:#555;width:100%;} body{margin:0;padding:0;}
然后在侧边栏和内容 div 周围添加一个 id 为 'container' 的 div。