如何使Reveal高度小于移动设备上的视口？

Question

我正在开发一个响应式网站，它在页面加载时有一个Foundation Reveal模式。我知道SMALL屏幕上Reveal的默认设置是占用整个屏幕，但我需要缩小它以便用户仍然可以看到它背后有一个网站。

我已经能够将两侧拉进去，并将顶部向下推。无论我做什么来尝试调整高度或自下而上，模态总是比手机上的视口大。我一直无法找到解决这个问题的方法。

我已经尝试使用硬像素和百分比来表示高度，最小高度，最大高度，并在揭示覆盖层上使用填充而没有运气。

这是我用来带顶部和侧面的CSS：

@media screen and (max-width: 39.9375em) {
    .reveal {
        width: 80%;
        margin: auto;
        top: 10%;
    }
}

理想情况下，模态的顶部和模式的底部分别在视口的顶部和底部之间约为10％。

Answer 1

偏移顶部用JS设置为模态上的样式。要在CSS中覆盖，你需要！important和vh单位，因为％与任何东西都不相关。

.reveal {
    width: 80%;
    margin: 0 auto;
    top: 15vh !important;
}

或改变JS

在.reveal添加data-v-offset="150"

data-v-offset - >数字或字符串距离（以像素为单位），模态应从屏幕顶部向下推。

要垂直居中模态，您可以使用绝对中心技巧：

top: 50vh !important;
transform: translateY(-50%);

您还可以覆盖100vh默认高度，如下所示：

min-height: 85vh;
height: 85vh !important;