Блог

У меня есть домашний компонент, который отображает сторонний компонент и div. Эти два должны отображаться рядом друг с другом с одинаковой высотой. (Div внутри домашнего компонента должен соответствовать высоте div внутри стороннего компонента)

Я получил прилагаемое рабочее решение, в котором я использовал «отображать: содержимое» в теге, не относящемся к приложению. Это непригодное для использования решение, поскольку оно не поддерживается Edge.

https://stackblitz.com/edit/angular-vkgwsb

я также попробовал «display: table» и «display: table-cell», которые также не работают.

app.component.html

 <div class="wrapper">
  <div class="container">
    <div class="content"></div>
    <app-aside></app-aside>
  </div>
</div>
 

app.component.css

 .wrapper {
  width: 1200px;
  margin: 0 auto;
}

.container {
  display: flex;
  width: 100%;
}

.content {
  min-height: 500px;
  width: 840px;
}
 

aside.component.html

 <div class="sidebar"></div>
 

aside.component.css

 .sidebar {
  min-height: 200px;
  width: 360px;
}
 

Оба Divs (содержимое и боковая панель) должны иметь одинаковую высоту.

Ваш aside элемент имеет ту же высоту, что и ваш .content div, из-за display: flex в контейнере. Проблема заключается в боковой панели div внутри app-aside компонента. Удалите .sidebar div (и измените стиль приложения с помощью :host {} селектора в css) ИЛИ добавьте height: 100% в .sidebar div.