我正在尝试为一个看起来像这样的网络应用程序创建一个绝对定位的小部件：
+-----------+ <-- top: 10px
| Header |
| Desc ln 1 |
| Desc ln 2 |
+-----------+ <-- moves down as more lines added to the description
| Scrolling |
| content |
| |
| |
+-----------+ <-- bottom: 10px
基本上它下面有一个标题和滚动内容。随着更多行添加到描述中，我希望滚动内容区域变得更小。我还需要将标题的顶部和滚动内容的底部固定到视口的顶部和底部。
这是我的 Plunker 尝试：http ://plnkr.co/edit/LdYl7e7GYhdGiF3NQ0Bv
如您所见，我一直无法弄清楚如何将中间线连接到标题的高度。
我知道我可以想办法用 JavaScript 做到这一点，但我更希望能够用纯 HTML/CSS 做到这一点。