Question

我的网站上有一个模式弹出框，位于<body>标记内。

这是弹出窗口的样式：

.modalbox {
    text-shadow: none;
    position: absolute;
    padding: 22px;
    left: 50%;
    background: white;
    z-index: 90;
    border-radius: 6px;
    display: none;
    font-size: 14px;
    width: 80%;
}

设置宽度很简单。然而，垂直内容是动态的，其中我的问题在于 - 我不希望盒子比浏览器窗口更高。

我已尝试设置max-width: 90%;，如果页面的body不再垂直于浏览器窗口，则此方法有效。

但是，当body溢出（并显示滚动条）时，上方的90%最大高度相对于body的高度，而不是窗口的高度。这意味着模式框可以垂直超出窗口，迫使用户滚动页面以查看其完整内容。

我想要完成的是最大高度为浏览器窗口的90％，以便整个模态框始终可见。

我将处理溢出，我只需要帮助弄清楚如何以上述方式限制垂直尺寸。

Answer 1

Use the viewport-percentage lengths调用servlet的doPost（）方法。

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

.modalbox {
    max-height: 90vh; }

Answer 2

据我所知，用html或css无法做到这一点，你必须使用JQuery来完成这个：

http://api.jquery.com/height/

// Returns height of browser viewport

$( window ).height();

然后只使用90％的高度值。

设置相对于浏览器窗口大小的max-height，而不是正文大小

2 个答案: