定位多个 div 元素

Question

我是 HTML5 世界的新手。我需要 CSS 布局方面的帮助。我已经尝试了很多在 Whosebug 中看到的解决方案。我可以让它工作，但使用固定定位。我想要更有活力的东西。

我在 plunker 中创建了一个示例。

http://plnkr.co/edit/nXxN17?p=preview

样本中：

index1.html => all div's are fixed except center element.
index.html => my requirment.

这里的问题是，如果我通过将 pagesize 更改为 50 或 100 来增加列表视图内容，列表视图会垂直展开并向下推内容。我想让listview填充剩余的高度，当它的内容变大时激活滚动。

基本上，我正在寻找不可滚动的主体。所有内容都应位于主页中并且中心元素可滚动，在本例中为 kendo ui 列表视图。

这是我的要求ui评论。

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，我做了，但仍然无法让中心元素将容器填充到最大，而不是将内容向下推。更新的插件： http://plnkr.co/edit/VaRdti?p=preview

请帮忙 - 谢谢

Answer 1

我是用 Flexbox 得到的。最初我没有使用 flex box，因为我需要在 IE 10 中支持。通过添加额外的供应商前缀，我能够满足给定的要求。

Visit http://plnkr.co/edit/VaRdti?p=preview

定位多个 div 元素

Positioning multiple div elements

html

javascript

css

css-position

flexbox