我正在尝试为网络应用创建一个绝对定位的小部件，如下所示：
+-----------+ <-- 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中完成它。
答案 0 :(得分：0)
您可以尝试使用具有<table>的继承高度和显示特征。
你的演示分叉：http://plnkr.co/edit/45f0SCrdrNzHJFZLsa8w?p=preview
在#header中的<div>或#content或两者中添加内容，并查看要滚动的内容。
如果#header变得比窗口高，那么所有东西都会展开，窗口会滚动。
<div>中只有#content可以滚动。