Отрегулируйте элемент на той же высоте, что и панель контейнера - PullRequest
Новая
       21

Отрегулируйте элемент на той же высоте, что и панель контейнера

0 голосов
/ 22 октября 2018

У меня есть контейнерная панель, которая может расширяться.Внутри панели контейнера у меня есть элемент, который я хочу отрегулировать на ту же высоту, когда она расширена, а когда нет.Как мне это сделать?

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

1 Ответ

0 голосов
/ 22 октября 2018

Прежде всего, использование 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>
...