Question

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

.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>

Answer 1

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

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

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

.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>

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

1 个答案: