Css 创建相对定位的滚动div_Css_Html_Position

Css 创建相对定位的滚动div

css html

Css 创建相对定位的滚动div,css,html,position,Css,Html,Position,我试图创造一种效果，我在页面上有一个小标题，始终保持在顶部可见，然后是页面的其余部分，可以上下滚动此时，页面一滚动，标题就从页面上滚下来，这不是我想要的。我曾考虑将页面的第二部分设置为滚动div，类似于，但不幸的是，这种方法似乎要求我提前知道标题div的高度，而我不知道-原因是高度可能会根据页面的宽度而改变，因此，如果页面不够宽，标题部分将溢出到下一行。出于这个原因，绝对位置似乎也是不可能的，因为我无法提前知道第二个div的位置在哪里-它应该正好在第一个div之后，不管它在哪里，即相对位置，但

我试图创造一种效果，我在页面上有一个小标题，始终保持在顶部可见，然后是页面的其余部分，可以上下滚动

此时，页面一滚动，标题就从页面上滚下来，这不是我想要的。我曾考虑将页面的第二部分设置为滚动div，类似于，但不幸的是，这种方法似乎要求我提前知道标题div的高度，而我不知道-原因是高度可能会根据页面的宽度而改变，因此，如果页面不够宽，标题部分将溢出到下一行。出于这个原因，绝对位置似乎也是不可能的，因为我无法提前知道第二个div的位置在哪里-它应该正好在第一个div之后，不管它在哪里，即相对位置，但绝对位置似乎是使可滚动div工作的技巧的一部分

那么，如何实现仅使用CSS相对于页面上另一个元素定位的滚动DIV呢？

使用以下命令定位标题元素：

position: fixed;

这将使它相对于浏览器窗口“固定”，无论您滚动了多少

用以下方法定位标题元素：

position: fixed;

这将使它相对于浏览器窗口“固定”，无论您滚动了多少

好吧，以@zigdawgydawg的答案为灵感，我发现这段代码可以工作

<!doctype html><html style="height:98%;">
<body style="height:100%;">
<div> ... contents of first div ... </div>
<div style="position:fixed; overflow:auto; height: 100%;">
... 
contents of second div 
...
</div>
</body></html>


... 第一部分的内容。。。
... 
第二组内容
...

好吧，以@zigdawgydawg的回答为灵感，我发现这个代码会起作用

<!doctype html><html style="height:98%;">
<body style="height:100%;">
<div> ... contents of first div ... </div>
<div style="position:fixed; overflow:auto; height: 100%;">
... 
contents of second div 
...
</div>
</body></html>


... 第一部分的内容。。。
... 
第二组内容
...

现在，我的第二个div的开始部分与第一个div重叠。您应该在第二个div中添加一个与第一个div高度相等的边距顶部。例如，

边距顶部：100px第一个div的高度不是固定的。它可能会因为浏览器的宽度而改变，导致内容溢出，或者其他任何事情。你不能使用CSS。一旦指定位置：固定元素从文档流中取出。您必须使用JavaScript/jQuery设置第二个div的上边距。我担心您会这么说。这意味着我将不得不捕捉可能导致第一个div高度变化的每个事件，然后再重新计算…现在我的第二个div的开始部分覆盖了第一个div。你应该在第二个div中添加一个与第一个div高度相等的边距顶部。例如边距顶部：100px第一个div的高度不是固定的。它可能会因为浏览器的宽度而改变，导致内容溢出，或者其他任何事情。你不能使用CSS。一旦指定位置：固定元素从文档流中取出。您必须使用JavaScript/jQuery设置第二个div的上边距。我担心您会这么说。这意味着我将不得不捕捉每一个可能导致第一个div高度改变的事件，然后重新计算时间。。。