带标题的绝对定位滚动视图

时间:2013-06-16 22:01:51

标签: html css

我正在尝试为网络应用创建一个绝对定位的小部件,如下所示:

+-----------+ <-- 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中完成它。

1 个答案:

答案 0 :(得分:0)

 您可以尝试使用具有<table>的继承高度和显示特征。

你的演示分叉:http://plnkr.co/edit/45f0SCrdrNzHJFZLsa8w?p=preview

#header中的<div>#content或两者中添加内容,并查看要滚动的内容。

如果#header变得比窗口高,那么所有东西都会展开,窗口会滚动。

<div>中只有#content可以滚动。

哎呀,FF遇到了麻烦,有点麻烦。 http://plnkr.co/edit/xBJuqnxBuFwfTV2BAAWl?p=preview