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

Question

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

所以，我从一些基本的HTML标记开始：

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

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

使用“position：fixed”标记dialogHeader时遇到相反的问题现在，它停留在视口中，但其宽度缩小到其内容的宽度。

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

有没有任何技巧可以实现这两种效果？或者我是否需要使用jQuery监视对话框的宽度并自动调整dialogHeader的宽度？

这是一个截图，显示对话框顶部的元素，其位置设置为固定。请注意，您可以看到绿色背景未覆盖整个顶部。

Answer 1

将窗口内容单独放置并完全放在窗口容器中，并使用overflow:auto强制滚动内容而不是溢出/增长其父级。

您可以将任何top-floater元素放在父上下文中。

Sample implementation on JSfiddle

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