具有固定纵横比的溢出网格项

问题描述 投票:0回答:1

我对弹出窗口有以下要求:

  • 弹出窗口的大小由其子窗口定义。
  • 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);
}
css css-grid
1个回答
0
投票

很难理解你的最终目标,但我假设你希望 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>

© www.soinside.com 2019 - 2024. All rights reserved.