仅使用 CSS 使子宽度等于父高度答案

【问题标题】：Make child width equal to parent height with CSS only仅使用 CSS 使子宽度等于父高度
【发布时间】：2021-09-17 20:19:22
【问题描述】：

如图所示，有两个元素：父元素（深灰色）和子元素（不那么深灰色）。父级的宽度和高度是可变的。孩子 i 的比例为 1:1 或 y:y，其中 y 等于父母的身高。

我试图找到使用 flex、calc、padding 等解决此问题的方法，但已经走到了尽头。非常感谢任何如何使用纯 CSS 解决此问题的想法。

编辑：我现在意识到我应该添加有关此场景使用的更多详细信息。以及我认为的动态高度。对我来说，动态高度表明高度取决于它包含的内容量。所以我添加了一些 HTML 来澄清。如果您可以将内容直接放在 .container div 中，则 .content div 可能是不必要的。但这取决于你如何编写 CSS：

<div class="container">
  <div class="content">
    Here is some text. It can be long and it can be short. 
    It will affect the height of the .container thus also 
    the height and width of the .square.
  </div>
  <div class="square">1:1</div>
</div>

【问题讨论】：

您尝试过的任何代码？
深色元素的高度是从哪里来的？
所以你的问题是如果宽度是动态的，如何使元素的高度等于它的宽度。？
你能发布这个 HTML 吗？
@MikeHarrison 显然，HTML 是 <div><div></div></div> ;)

标签： html css

【解决方案1】：

我认为你尝试做的事情是不可能的！没有JS你无法获得父母的身高。但也许还有另一种解决方案。你的父容器也有固定的比例吗？

【讨论】：

我同意，我认为这也不可能，但我每天都在学习有关 CSS 的新东西，我认为大多数使用它的人都会这样做。那么谁知道呢。父容器没有固定的比例。

【解决方案2】：

您可以为此使用 vh 属性。将父 div 的高度设置为 vh，然后对子 div 的宽度使用相同的 vh 值，并将子 div 的高度设置为 100%。

#parent{
    position: absolute;
    left: 0;
    top:0;
    width: 400px;
    height: 50vh;
    background-color: red;
}

#child{
    position: relative;
    float: right;
    height: 100%;
    width: 50vh;
    background-color: blue;
}

<div id="parent">
   <div id="child"></div>
</div>

【讨论】：

理论上我喜欢这个，但是当你用 div 中的内容对其进行测试时，它就会崩溃codepen.io/anon/pen/XNzVaa
在 chil 元素上使用溢出滚动。在大多数 CSS 设置中，您所做的一切都会崩溃。 :) 然后你可以使用 webkit 来隐藏滚动条。
正如问题中提到的，高度是流动的（也许我应该写动态更清楚）。 50vh 是视口的 50%，因此不是动态高度。
这是相对于窗口的动态。我在思考相对于它的内容是动态的。假设父级包含影响其高度的 som 文本，当添加更多内容并且子级应该跟随时，父级的高度会增加。我现在意识到我可能在这个问题上更清楚了。
我很遗憾地说这对于纯 css 来说是不可能的 :( 但有个好消息 :) 你可以用一点 javascript 很容易地做到这一点，但看到你不想使用 JS 我建议为您的问题寻找不同的解决方案。也许你想要的方式不是最好的主意。如果您需要更多帮助，请告诉我。

【解决方案3】：

这个问题很老了。但是今天我发现了一个非常棘手的解决方案，可能会有所帮助。也就是说，我利用图像的属性（此处为 svg）在缩放时保持纵横比。所以我插入一个空的svg 并使其高度适合父级。然后我们让它的宽度等于它的高度。（您可以更改<svg viewBox="0 0 1 1" > 部分中的1 1 以更改比率）。请参见下面的示例。对不起我的英语不好。

.outer {
  display: flex;
  
  /* This is just for the example */
  width: 700px; /* x */
  height: 100px; /* y */
  font-size: 18px;
  font-family: Verdana, Geneva, sans-serif;
}

.left {
  flex-grow: 1
  
  /* This is just for the example */
  color: #cddfc9;
  background-color: #636363;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  height: 100%;
  position: relative;
  display: inline-flex;
}

/* This is the trick */
.child svg {
  height: 100%;
  width: 100%;
}

.child > .content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  /* This is just for the example */
  color: white;
  background-color: #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="outer">
  <div class="left">
   Text of various length be here...
  </div>
  <div class="child">
    <svg viewBox="0 0 1 1" ></svg>
    <div class="content">
      yxy
    </div>
  </div>
</div>

【讨论】：