我有一個絕對定位的 div 以螢屏為中心，我想防止它離開螢屏。我在 SO 上看到過類似的問題，但在我的情況下，我不知道 div 的大小，所以我使用 translate/transform 對齊它。
但是當瀏覽器視窗變得小于 div 高度時，它就會離開螢屏。
我希望添加“最大高度：100vh”可以解決問題，但事實并非如此。
是否可以以某種方式將整個 div 保留在螢屏上，最好使用 CSS？
<!DOCTYPE html>
<head>
<style>
.dialog {
min-width: 200px;
min-height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/* Should not be set! */
/* width: 100px; */
/* height: 100px; */
max-height: 100vh;
overflow-y: auto;
background-color: #aaa;
z-index: 1;
}
</style>
</head>
<body>
<div class="dialog">
First <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />last
</div>
</body>
uj5u.com熱心網友回復：
您可以將媒體查詢設定為與min-height您的對話框相同，并更改min-height.
.dialog {
min-width: 200px;
min-height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
max-height: 100vh;
overflow-y: auto;
background-color: #aaa;
z-index: 1;
}
@media screen and (max-height: 150px) {
.dialog {
min-height: 100vh;
}
}<body>
<div class="dialog">
First <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />last
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438244.html