Question

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

在我的布局中，我的标题（实际菜单）固定高度（以像素为单位），内容区域（可能会溢出窗口高度以便滚动条显示）和粘滞的页脚具有固定高度。同样在内容区域的左侧和右侧可能有面板

类似的东西：

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

我尝试过这样的解决方案：

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

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

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

是否有人为此任务执行了某些指令？

Answer 1

目前我有这个解决方案：

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

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

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

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

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

有一些限制：

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

欢迎改进！

动态高度指令自动填充剩余区域

1 个答案: