我对弹出窗口有以下要求:
large
子级需要相当大,以确保内容实际上可以被阅读。square
孩子只需是正方形即可。我还想让它们的高度相同,这样看起来更干净。
但是,在下面的代码片段中,设置
height: 100%
不会使弹出窗口变宽,它只会使方形项目溢出弹出窗口。我该如何解决这个问题?
.popup {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto 1fr;
grid-gap: 0.5rem;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.popup > * {
background-color: lightblue;
}
.large {
min-width: 150px;
width: 50vw;
min-height: 100px;
height: 30vh;
}
.square {
height: 100%;
aspect-ratio: 1;
}
<html style="height: 100%">
<body style="height: 100%; margin: 0; position: relative;">
<div class="popup">
<div>hi</div>
<div class="large"></div>
<div>hello</div>
<div class="square"></div>
</div>
</body>
</html>
我有一个可能的解决方法,但我觉得它不是很干净:
.popup {
--large-height: clamp(100px, 30vh, 10000px);
}
.large {
height: var(--large-height);
}
.square {
height: 100%;
width: var(--large-height);
}
很难理解你的最终目标,但我假设你希望 square 成为
.square
并且与 <div>hello</div>
具有相同的宽度:
.popup {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto 1fr;
grid-gap: 0.5rem;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.popup > * {
background-color: lightblue;
}
.large {
min-width: 150px;
width: 50vw;
min-height: 100px;
height: 30vh;
}
.square {
min-width: 0; /* <-- */
aspect-ratio: 1;
}
<html style="height: 100%">
<body style="height: 100%; margin: 0; position: relative;">
<div class="popup">
<div>hi</div>
<div class="large"></div>
<div>hello</div>
<div class="square"></div>
</div>
</body>
</html>