当 Foundation 5 太大时，如何让其显示模式可滚动？答案

【问题标题】：How can I make Foundation 5 reveal modal scrollable when it's too big?当 Foundation 5 太大时，如何让其显示模式可滚动？
【发布时间】：2016-08-16 11:46:04
【问题描述】：

我正在使用显示模式。根据窗口大小，内容可能太大而无法在屏幕上显示。

无论我做什么，我都无法滚动查看所有内容。我尝试使模态本身溢出-y：auto;，但这没有帮助。

下面的屏幕截图来自一个设置为移动设备大小的 chrome 窗口。表单底部有一个按钮，因为看不到，所以无法按下。

窗口和模态内容都将滚动。此外，模式的顶部似乎太低了，但这似乎并没有改变底部按钮的可访问性。

【问题讨论】：

标签： zurb-foundation reveal.js zurb-foundation-5 zurb-reveal

【解决方案1】：

您必须提及显示模式的阈值高度，之后将考虑 overflow-y 并出现滚动条。

.reveal-modal
{
  max-height:initial; //reset any max-height set by foundation defaults
  height:600px; //replace value with your desired height
  overflow-y:scroll;
}

【讨论】：

这个问题是现在它是一个固定的高度，根据屏幕尺寸并不总是有效。我确实想出了另一种方法，虽然我认为这是一个创可贴。
如果使用多个屏幕是您的问题，那么您可以使用 css 媒体查询为不同的屏幕提及不同的高度。或者，您也可以提及% 值而不是px值。但是，如果您追求完美，您将不得不再次使用媒体查询。

【解决方案2】：

在移动模式下，我能够将高度设置为 60%，上边距为 20% 和 100vh。我还必须将对话框位置更改为固定并禁用滚动设置，我认为这是 5.2.2 之后的新增功能，这可以解释为什么我最近才在更新后才开始遇到此问题。这是我能够做到的：

https://github.com/macdabby/Lightning/commit/202ae9156ebf034c8cb4b625161015763fa0658f

【讨论】：

【解决方案3】：

将“full”类添加到“reveal-modal”，高度将设置为 100% 可滚动：

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

在这种模式下，我注意到背景覆盖（阴影和边框）有问题，所以我添加了以下 CSS 来移除背景覆盖：

<style>
.reveal-modal {
    border:0 none;
    box-shadow:none;
}
.reveal-modal-bg {
    background-color: transparent;
}
</style>

这里是my example page

【讨论】：