Блог

Главная - Вопросы по программированию - Дочерний элемент родительского элемента с минимальной высотой: 300 пикселей не наследует высоту родительского элемента

Дочерний элемент родительского элемента с минимальной высотой: 300 пикселей не наследует высоту родительского элемента

#css

#css

Вопрос:

У меня есть блок div, как показано ниже:

 <div className={'row ge-container'}>
   <div className={'a-span3 ge-container-navigation'}>
      hello
   </div>
   <div className={'a-span9 ge-container-content'}>
      Okay    
   </div>
</div>

И css как

 .ge-container {
  min-height: 300px;
}
.ge-container-navigation {
  background-color: $light-gray-background;
  display: inline-block;
  float: left;
  height: inherit;
  margin: 5px 0 0 0;
  padding: 10px 8px 0 8px;
  border: 1px solid $gray;
}
.ge-container-content {
  display: inline-block;
  height: inherit;
}

Дочерний элемент не наследует высоту родительского элемента. Я попробовал решение, установив минимальную высоту дочернего элемента для наследования, увидев некоторые ответы. Но это не удается, когда высота превышает 300 пикселей.

Кто-нибудь может помочь с этим

Комментарии:

1. наследование учитывайте ТО ЖЕ свойство, вы не можете наследовать минимальную высоту внутри высоты (или наоборот)

2. @TemaniAfif Я хочу наследовать только высоту. Это было просто решение, которое вместо наследования высоты наследовало minHeight, установив min-height: inherit в дочернем css. Но это не удается, когда родительский элемент имеет высоту больше 300 пикселей.

3. сделайте родительский дисплей: flex

4. Можете ли вы создать фрагмент или JSFiddle?

5. Кто-то забыл очистить значение с плавающей точкой?

Ответ №1:

Пожалуйста, используйте display: flex; CSS в .ge-container родительском элементе.

Этот код создает дочерний гибкий блок высотой 100%, используя только CSS.

 .ge-container {
  min-height: 300px;
      display: flex;
}

Обновленный фрагмент :-

  .ge-container {
  min-height: 300px;
      display: flex;
}
.ge-container-navigation {
  background-color:red;
  display: inline-block;
  float: left;
  height: inherit;
  margin: 5px 0 0 0;
  padding: 10px 8px 0 8px;
  border: 1px solid $gray;
}
.ge-container-content {
  display: inline-block;
  height: inherit;
}  
 <div class="row ge-container">
   <div class="a-span3 ge-container-navigation">
      hello
   </div>
   <div className="a-span9 ge-container-content">
      Okay    
   </div>
</div>

Ответ №2:

Вы также можете попробовать это с помощью javascript / jquery

 $('.ge-container-navigation').height($('.ge-container'));

и, если вы хотите, чтобы он обновлял себя в режиме ротации:

 setInterval(function(){
  $('.ge-container-navigation').height($('.ge-container'));
}, 10);

Спасибо