我正在尝试为网络应用创建一个绝对定位的小部件,如下所示:
+-----------+ <-- 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
可以滚动。