【发布时间】：2015-12-18 08:08:35
【问题描述】：
我是 HTML5 世界的新手。我需要一些有关 CSS 布局的帮助。我已经尝试了很多我在 StackOverflow 中看到的解决方案。我可以让它工作，但使用固定定位。我想要一些更有活力的东西。
我在 plunker 中创建了一个示例。
http://plnkr.co/edit/nXxN17?p=preview
在示例中：
index1.html => all div's are fixed except center element.
index.html => my requirment.
这里的问题是，如果我增加列表视图的内容，通过将页面大小更改为 50 或 100，列表视图会垂直扩展，将内容向下推。我希望 listview 填充剩余的高度并在其内容变大时激活滚动。
基本上，我正在寻找不可滚动的主体。所有内容都应在主页中，并且中心元素可滚动，在本例中为 kendo ui listview。
这是我的要求。
body
div - 40px;
div - maxHeight: 100px; - header
div - height:30px; (pager)
div - height: * (kendo ui listview) - fill height and scrollable
div - maxHeight: 100px; - footer
div - height: 40px; - buttons always stays on bottom
编辑： 正如建议尝试使用 flex 一样，我做到了，但仍然无法让中心元素将容器填充到最大并且不会将内容向下推。 更新plunk： http://plnkr.co/edit/VaRdti?p=preview
请帮忙 - 谢谢
【问题讨论】：
-
请更好地解释您的问题，以便我们能够提供更多帮助，从您的演示来看，一切似乎都井井有条。如果您的问题是中心视图生成滚动，也许您可以对固定高度求和，并使用
calc(100% - 310px)设置列表视图，这样窗口将保持无滚动... -
需要和想要帮助之间有很大的不同。
-
@Rakesh 你要一个 Android ListView 吗？
-
@joaoBeno 我添加了更多细节。我不能使用 calc，因为我没有页眉和页脚的高度。页眉和页脚可以为空或填充到它的最大高度。所以我希望中心视图填充剩余的高度并在内容较大时滚动。请尝试将页面大小增加到 50 或 100。
-
@Rakesh 尝试使用 flexbox 然后...这是你需要知道的让它工作：css-tricks.com/snippets/css/a-guide-to-flexbox
标签： javascript css html css-position flexbox