-2

I would like to calculate the min-height of an element doing somening like that:

min-height: calc(50vh - height-of-other-element);

where height-of-other-element is height of a element that can be rendered or not using angular *ngIf.

How can I solve this problem?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Davide
  • 185
  • 3
  • 22
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Apr 07 '21 at 17:33

2 Answers2

1

if you use a template reference and not *ngIf="condition" else [style.display]="!condition?'none':null you can use some like

<div #element [style.display]="!toogle?'none':null" >
...
</div>

<div [style.min-height]="'calc(50vh - '+element.getBoundingClientRect().height+'px)'" >
   ...
</div>

You can see an example in this stackblitz

NOTE: I think that you can use css flex wrapping the two divs in another one and not use "calc". If you want to know about css flex, I like this link

Eliseo
  • 50,109
  • 4
  • 29
  • 67
0

I suggest you use a conditional class via ngIf. Basically you can create 2 css classes, one with min-height: calc(50vh - height-of-other-element); and other only with min-height: 50vh. Then in your HTML, use something like ngClass to select the correct class for your div.

You can check this question to see some examples: Angular: conditional class with *ngClass

Arya
  • 101
  • 1
  • 4