Angular：将div的高度与组件内的div匹配

Question

我有一个 home-component，它显示一个 side-component 和一个 div。 这两个应该以相同的高度彼此相邻显示。 （home-component里面的div要和aside-component里面的div高度一致）

我附上了一个可行的解决方案，我在 app-aside 标签上使用了“显示：内容”。这不是一个可用的解决方案，因为 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;
}

两个 Div（内容和侧边栏）应具有相同的高度。

Answer 1

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