如何使布局100％高度

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

见我的源代码：http://codepen.io/adilson/pen/kiHsd

显然布局似乎是高度的100％，但调整浏览器并打开“菜单项10”时，很显然，事实并非如此。

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

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

这里是什么，我试图做一个例子：http://www.keenthemes.com/preview/metronic/layout_blank_page.html

我只是不希望这种模式的页眉和页脚，但其余的正是我想做的事情。

来源

2013-05-13 Web User

不是一个明确的问题。 – diEcho 2013-05-13 05:57:12

你打开代码并在Codepen中预览？在那里你可以清楚地看到我上面有关.. 我想要使布局100％的高度（边栏+内容）.. – 2013-05-13 06:06:12

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

您可以通过使用containers让他们都在同一高度：

这里的jsFiddle例子。

来源

2013-05-13 07:10:03

这是一个很好的理念......也许使用容器和“display：table”像其他社区中发布的示例一样：http://codepen.io/anon/pen/DivFj – 2013-05-13 23:08:16

这也可以工作。只要选择你最喜欢的方式:) – 2013-05-14 08:00:40

您可以将溢出：自动添加到#sidebar。

#sidebar{overflow:auto;}

这会自动溢出事物。

来源

2013-05-13 06:28:43 Nitesh

溢出在边栏中创建一个滚动条。有没有其他的选择？也许把所有的内容放在一个Wrapper中？ – 2013-05-13 06:37:40

有几个解决方案。一种是滚动侧面导航。另一个是限制子菜单的高度，然后滚动它们。

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

您可能要直到你得到想要的样子，你是后您的嵌套列表项的最大高度值试验：对于这一点，作如下更新你的CSS。

为了使您的侧边栏滚动的时候，屏幕尺寸减小添加以下，

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

添加顶部和底部位置将确保您的侧边栏留在地方，占据了原稿的高度的100％。

希望这会有帮助

来源

2013-05-13 07:51:17 lukeocom

lukeocom，我想避免边栏的滚动。我添加了一个在初始消息中会做什么的例子。 – 2013-05-13 11:24:09

设计之间的差异在于您试图使用100％的相对高度。您提供的示例使用的固定高度为947px ...您可能希望将以下内容添加到您的css中。 #container {height：800px; background-color：＃555; width：100％;} body {margin：0; padding：0;} – lukeocom 2013-05-14 00:33:35

然后添加一个ID为'container'的div，围绕边栏和内容div的。 – lukeocom 2013-05-14 00:34:11

如何使布局100％高度

回答

相关问题