Html 修复了模式溢出视口时无法滚动的问题 问题

我已经做了一个固定的模式来显示页面的主要内容。模态包含的内容的高度可能最终大于视口，因此需要滚动，但它只是不起作用

情态动词的内容 在模态范围内是

带有灰色背景的空叠加/背景

div

，占据模式的全部宽度和高度

内容本身的高度可能最终大于视口

JS小提琴 下面是一个JS小提琴演示了这个问题。 我添加了边框颜色，以更好地帮助区分各个元素

---

您需要将此css属性添加到模式内容中：

  position:relative;
  overflow:auto;
  height:100%;

• 未应用z索引，因为位置是静态的，所以 需要添加

  位置：相对
  

• 要激活滚动条，您需要同时添加

  溢出：auto

  和 固定

  高度
  为
  100%

• 不要忘记，您应该修复模式父对象的

  高度

  模态到

  100%

  也一样

查看结果：

html，
身体{
宽度：100%；
}
html{
身高：100%；
}
身体{
最小高度：100%；
字体系列：consolas；
}
梅因先生{
边框：2件纯蓝；
}
.莫代尔{
z指数：10；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框：2倍纯红；
}
.模态叠加{
z指数：1；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（138,138,138,0.5）；
边框：2个绿色虚线；
}
.modal___内容{
z指数：2；
边框：2件点蓝色；
位置：相对位置；
溢出：自动；
身高：100%；
}
.模拟内容{
宽度：120px；
高度：200px；
保证金：12px自动；
填充：12px；
文本对齐：居中；
字体大小：粗体；
背景色：rgb（255,50,50）；
}

身体内容
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
除非偶尔出于不谨慎的原因，否则不应因工作过失而受到惩罚。”

模态内容1/5
模态内容2/5
模态内容3/5
模态内容4/5
模态内容5/5

谢谢，它很有效。你能解释一下为什么吗？根据我的理解，您似乎正在滚动模态内容，而不是模态父对象本身。。。。但是为什么家长和内容都需要

height:100%

？他们不应该扩大自己的身高来匹配孩子的身高吗？有人会认为

min height:100%

可以解决这个问题吗？因为模态包含两个元素modal\u overlay和modal\u content，所以只滚动内容而不同时滚动这两个元素是合乎逻辑的，使用最小高度并不限制模式的高度，因此除非高度受到限制且内容超过固定高度，否则不会显示滚动条