1

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

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

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

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

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

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

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

这是一个屏幕截图，显示了我在对话框顶部的元素，其位置设置为固定。请注意，您可以看到绿色背景没有覆盖整个顶部。在此处输入图像描述

4

1 回答 1

1

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

您可以将任何顶级浮动元素放在父上下文中。

Sample implementation on JSfiddle

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

于 2013-06-11T22:16:02.137 回答