1

是否有任何好的指令实现动态改变元素的高度以填充剩余容器的高度？

在我的布局中，我的标题（实际上是菜单）固定高度（以像素为单位）、内容区域（可能溢出窗口高度以上，因此应该出现滚动条）和固定高度的粘性页脚。在内容区域的左右两侧也可以有面板

所以是这样的：

┌──────────────────┐
│       Header     │ ~100px
├─┬──────────────┬─┤
│P│             ▲│P│
│a│   Content   ▒│a│ fill remaining area, with scroll bars
│n│             ◙│n│
│e│             ▒│e│
│l│             ▼│l│
├─┴──────────────┴─┤
│       Footer     │ ~100px
└──────────────────┘

我试过这样的解决方案：

  1. 使用高度：100%。但是由于页眉/页脚以像素为单位，因此很难以百分比来衡量它们的高度，这个解决方案并没有解决问题。
  2. 使用诸如“display: table-row”之类的 haks 不允许内容区域有滚动条

由于它是网站的常见布局，因此有很多使用 JS 的解决方案，但大多数都不是通用的 - 或者不可能有滚动条，或者面板是不可能的。

所以我理解，唯一的解决方案是使用 JavaScript 来调整 en 元素的高度，所以最好的放置位置是指令。

有人对此任务有一些指令的实施吗？

4

1 回答 1

2

目前我有这个解决方案：

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

指令fill以这种方式工作::

  1. 计算包含当前元素的所有元素的padding-bottom++margin-bottomborder-bottom-width
  2. 在当前元素下方和所有元素下方添加所有元素的高度，包含当前元素
  3. offsetTop从元素的窗口高度和先前计算的结果中减去
  4. 将元素的高度设置为结果值

所以高度计算的想法（实际上是当前元素下方区域的高度）是：

╔══════════════════════════╗
║                          ║
║    ╔═════════════╗       ║
║    ║ Element     ║       ║
║    ║ to autofill ║       ║
║    ...............       ║
║    ╚═════════════╨───────╫─────────
║                          ║         + margin/padding
║  ╔════════════════════╥──╫─────────
║  ║ some element       ║  ║
║  ║   below            ║  ║         + height
║  ║                    ║  ║
║  ╚════════════════════╨──╫─────────
║                          ║         + margin/padding
╚══════════════════════════╨─────────

有一些限制：

  1. 我假设填充、边距、边框的宽度以像素为单位指定（从其他单位转换似乎非常复杂）
  2. 我没有在除 Chrome 之外的其他浏览器上测试过它。

欢迎改进！

于 2013-04-11T16:37:33.143 回答