Question

我有一个固定在顶部的标题，它的高度根据它携带的附加和可扩展行的数量而变化。然后我有另一个<main>元素，我需要下推相当于.base + .row元素（而不是.expandable）的高度。高度可以根据浏览器窗口大小而改变，因此需要响应。

这样的事情：

<app-header></app-header>

<main>Some content</main>

<{1}}的

模板：

<app-header>

<{1}}的

样式：

<header>
    <section class="base">First row</section>
    <section class="row">Second row</section>
    <section class="expandable">Third row</section>
</header>

现在header是Angular（2/4）中的一个单独组件。为此解决方案的最佳方法是什么？

P.S：我不认为CSS解决方案可以在这里工作。

编辑：将<app-header>转换为单独的组件。

Answer 1

<header>
    <section #base class="base">First row</section>
    <section #row class="row">Second row</section>
    <section class="expandable">Third row</section>
</header>


<main [ngStyle]="{'margin-top':row.offsetHieght+base.offsetHeight+'px'}">Some content</main>

工作：https://plnkr.co/edit/bIisDWSftaFQEEiDHmtT?p=preview

显然，您可以通过使用一些可重复使用的功能来优化它并使其更清洁

这也可以：

<main [style.margin-top]="row.offsetHeight+base.offsetHeight+'px'">
  My main content
</main>

而且：

<main [style.margin-top.px]="row.offsetHeight+base.offsetHeight">
  My main content
</main>

一个组件的动态高度计算，在Angular中用于另一个组件

1 个答案: