CSS修复-保留HTML元素的替代方法

我想创建一个网页，上面有一个包含标题的部分，下面有一个包含数据的部分。然后，我希望标题保持可见，数据能够以与Excel中锁定行相同的方式滚动

<div id="heading">This is my Heading</div>
<div id="data">
   <a>1st line of Data</a>
   <a>2nd line of Data</a>
</div>

这是我的标题
第一行数据
第二行数据

现在我知道如果我在css中设置了

#heading{position:fixed；top:0px；left:0px}

，那么我的heading将保持在原来的位置，我的数据可以在下面滚动。但是还有其他的方法吗

我之所以想找到一种不同的方法，是因为我有一款使用框架的传统应用程序（是的，我知道所有不使用框架的原因——但如果你们中的任何人与老板进行了对话，你解释了一个小错误的修复是完全重写，他/她说是的，去吧，那么我想和你一起工作！）我们在帧中有固定的元素，但是如果帧设置为零大小（关闭），然后重新打开，它们就不能在mac上的Safari中看到。元素仍然在DOM中，它们应该是可见的，甚至可以看到它们的工具提示和它们的单击事件

---

因此，经过数小时的尝试，我认为有必要寻找一种替代

css-fixed

的方法，其中一种方法是使用

absolute

而不是

fixed

。另一种解决方案是仅滚动内部内容：

#数据{
最大高度：150像素；
溢出：自动；
}

这是我的标题
第一行数据
第二行数据

Lorem ipsum dolor sit amet，是一位杰出的献身者。在洛博蒂斯多洛的普拉森。毛里斯·迪克特和非特里斯蒂克·法雷特拉。但这是乌兰科佩尔的生命。这是一个令人振奋的时刻，但这是一个令人振奋的时刻。纳拉姆
奎斯纵容厄洛斯。埃尼安·蒂尼德·拉奥里特·乌尔纳（Aenean tincidunt Laoret urna）是一位时间矢状面终结者。Fusce eget faucibus felis。这是我的宿命。佩伦茨克是一个空荡荡的地方，是一个充满活力的地方，是莫里斯的地方。塞德普尔维纳乌兰科珀酒店
尼西，坐在埃米特·尤伊斯莫·利奥旁边。酒后驾车是一种危险的交通工具。纳拉是一只秃鹫。福西布斯河豚（Phasellus fringilla velit id ex luctus faucibus）。劳里特万岁，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着，爱神坐着。
这是一个很好的例子。多内克在马萨坐了下来。Present sem diam，Placelat eu arcu sed，euismod auctor est。佩伦茨克·弗林蒂利亚、洛勒姆·ac·莫莱斯蒂·康塞奎特、自由奥古斯·康塞特图尔·拉克斯、塞德
从利奥到维利特。在朗卡斯广场，坐着一位尊贵的尼布。马来苏阿达·比本杜姆·埃拉特，罗特鲁姆·多洛·萨吉提斯·欧拉的生命。天竺葵。Ut ultricies非猫科动物欧盟诅咒。面部软组织库拉比托位于面部软组织中。
毛里斯·艾尔特利斯，马克西姆·胡斯托·维塔，奥纳雷·塞姆。

这将使其成为绝对值，并在滚动页面时更改顶部值。 这不是最好的解决方案，但有效：

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
$（“#heading”）.css（“top”，$（window.scrollTop（））；
})
})

#标题{
背景：红色；
z指数：100；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
}

这是我的标题
第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

第一行数据

第二行数据

我喜欢这个想法，但我不想对数据元素施加高度限制，理想情况下，我希望数据填充页面的其余部分，然后只在填充后滚动。@sbarnby71使用js或使用flex box计算高度。我希望有一个纯css解决方案（如果可能的话）因为如果用户调整文档大小等，必须重新计算高度。@sbarnby71 flexbox是纯css解决方案谢谢@Justinas我会提出一个很好的问题，但没有好的答案：-D会尝试找到它的答案。