Angular: div 与内部组件 div 的匹配高度

Question

我有一个 home-component，它显示一个 aside-component 和一个 div。这两个应该以相同的高度并排显示。（home-component 里面的 div 应该和 aside-component 里面的 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;
}

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

Answer 1

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

Angular: div 与内部组件 div 的匹配高度

Angular: Matching height of div with div inside component

html

height

components

angular

app.component.html

app.component.css

aside.component.html

aside.component.css