角度：div与组件内部div的匹配高度

Question

我有一个home组件，它显示aside组件和div。 这两个应以相同的高度彼此相邻显示。 （home组件内的div应该与aside组件内的div的高度匹配）

我附上了一个可行的解决方案，其中在app-aside标签上使用了“ display：contents”。这不是可用的解决方案，因为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（内容和侧边栏）的高度都应相同。

Answer 1

您的aside元素的高度与.content div的高度相同，这是因为显示：容器上的flex。问题是app-aside组件中的侧边栏div。删除.sidebar div（并使用css中的:host {}选择器设置应用程序样式）或将height: 100%添加到.sidebar div。