Javascript 应用位置：固定到div，同时保持自动宽度

我有一个打开的对话框窗口，它有一个可调整大小的宽度和一个可引起滚动的最大高度。我想在这个对话框的顶部放置一个div（或多个元素，如果需要的话），这样当我滚动时，div仍然可见。我还希望div的宽度填充对话框的宽度

因此，我从一些基本的HTML标记开始：

<div id="dialog">
    <div id="dialogHeader"><div>
    <div id="dialogContents"></div>
</div>

此时，dialogHeader的宽度会自动缩放以适应对话框的宽度。但是，如果向下滚动dialogContents，dialogHeader将从视口中滚出来

我在用“位置：固定”标记dialogHeader时遇到了相反的问题；现在，它保留在视口中，但其宽度缩小到其内容的宽度

如果我将dialogHeader的宽度设置为100%，那么它将扩展到对话框之外

实现这两种效果有什么诀窍吗？或者我需要使用jQuery监视对话框的宽度并自动调整dialogHeader的宽度吗

---

这是一个屏幕截图，显示了对话框顶部的my元素，其位置设置为fixed。请注意，您可以看到绿色背景没有覆盖整个顶部

将窗口内容单独绝对地放置在窗口容器中，并使用

溢出：自动

强制内容滚动，而不是溢出/增长其父内容

您可以在父上下文中放置任何顶部浮动元素

---

请注意，您可以随意调整输出窗口的大小，以测试其大小。

将窗口内容单独绝对地放置在窗口容器中，并使用

溢出：自动

强制内容滚动，而不是溢出/增长其父窗口

您可以在父上下文中放置任何顶部浮动元素

---

请注意，您可以随意调整输出窗口的大小，以测试其大小。

是的。该对话框有一个滚动条。我已经编辑了这个场景的屏幕截图。你能不能把滚动条放在content div而不是outer div上。我只是认为这是阻力最小的路径，因为在这个应用程序中，所有对话框的最大高度都是在对话框级别设置的。限制对话框子集中的内容高度可能会导致潜在的双嵌套滚动条/其他不规则情况。。。我只是好奇，是否可以先这样做。：）是的。该对话框有一个滚动条。我已经编辑了这个场景的屏幕截图。你能不能把滚动条放在content div而不是outer div上。我只是认为这是阻力最小的路径，因为在这个应用程序中，所有对话框的最大高度都是在对话框级别设置的。限制对话框子集中的内容高度可能会导致潜在的双嵌套滚动条/其他不规则情况。。。我只是好奇，是否可以先这样做。：）见评论。他不想将滚动条移动到内容上，他希望将其保留在整个对话框中。我更改了小提琴以添加浮动搜索框，但如果这不是他想要的，我完全误解了问题呵呵。请参阅评论。他不想把滚动条移到内容上，他想把它保留在整个对话框上。我把小提琴改成了浮动搜索框，但如果这不是他想要的，我完全误解了这个问题，呵呵。