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

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.

下的整个 space

如果您希望您的子元素 (.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>

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

Adjust element the same height as container panel

javascript

html

css

layout

height