将元素调整为与容器面板相同的高度

【问题标题】：Adjust element the same height as container panel将元素调整为与容器面板相同的高度
【发布时间】：2019-03-26 06:23:59
【问题描述】：

我有一个可以扩展的容器面板。在容器面板内，我有一个元素，我想在展开和不展开时将其调整为相同的高度。我该怎么做？

.container {
  border: 1px solid rgba(0, 0, 0, 0.87);
  width: 895px;
  position: relative;
  display: inline-block;
  padding-bottom: 8rem;
  top: 60px;
}

.imageAdj {
  object-fit: cover;
  width: inherit;
  height: inherit;
  border: 1px solid rgba(0, 0, 0, 0.87);
  float: left;
}

<div className="secrets-config">
  <div>
    <p>Blah blah blah</p>
    <Image className="imageAdj ">
  </div>
</div>

【问题讨论】：

您能给我们提供 HTML 或代码 sn-p 吗？没有上下文很难解决你的 CSS 问题。
@Max 见上面的代码。
@Max 我的标题是错误的。我应该写大小。

标签： javascript html css layout height

【解决方案1】：

首先，className 的使用仅在 JavaScript 文件中有效。 Image 也是如此。

你所做的大部分是正确的，只是因为你使用了padding-bottom: 8rem;，它永远不会填满你.element下的整个空间。

如果您希望您的子元素 (.element) 能够使用 height: 100%;，您需要在您的父元素 (.container) 中指定 height

.container {
  display: inline-block;
  width: 895px;
  height: auto;
  //padding-bottom: 8rem;
  position: relative;
  top: 60px;
  border: 1px solid rgba(0, 0, 0, 0.87);
}

.element {
  display: block;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.87);
}

<div class="container">
  <div class="element">
    <img src="link/to/file.png">
    <p>context text</p>
  </div>
</div>

【讨论】：