修复了 jquery UI 对话框顶部的内容

Question

我想在 UI 对话框顶部有一个固定的 div，而其余的内容应该滚动。

我已经设法用position: fixed 修复了相对于容器的问题，没有指定left 或top，但我无法正确调整它的大小：它的宽度是相对于它的内容而不是它的父级.

I've set up a fiddle for this

除了添加每次调整对话框大小时调整大小的javascript之外，还有其他方法可以实现吗？

Answer 1

考虑一下：https://jsfiddle.net/Twisty/hafuzbxm/5/

位置：粘性；

带有position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如 position:fixed）。

查看更多：https://www.w3schools.com/css/css_positioning.asp

CSS

#infoDialogMessage {
  position: relative;
}

#fixthis {
  background-color: #333;
  color: white;
  position: sticky;
  top: 0;
}

#scrollthis {
  overflow-y: auto;
}