Question

我正在一个响应式网站上，该网站在页面加载时具有Foundation 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;