gpt4 book ai didi

css - 设置相对于浏览器窗口大小的最大高度,而不是主体大小

转载 作者:技术小花猫 更新时间:2023-10-29 10:26:44 25 4
gpt4 key购买 nike

我的网站上有一个模态弹出框,在 <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 的高度的,不是 window 。这意味着模式框可以垂直超出窗口,迫使用户滚动页面以查看其全部内容。

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

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

最佳答案

使用 viewport-percentage lengths .

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

.modalbox {
max-height: 90vh; }

关于css - 设置相对于浏览器窗口大小的最大高度,而不是主体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28948894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com