How could I set the height of a div equal to the height of the window? I've found on this question Dynamically updating css in Angular 2 saying that I must use code below:
<div class="home-component"
[style.width.px]="width"
[style.height.px]="height">Some stuff in this div</div>
I've update this code like code below:
<div class="imagecontainer" [style.height.px]="window.innerHeight">
Some code
</div>
But this give me next error:
Cannot read property
innerHeightof undefined
My questions are now:
div equal to the height of the inner window with Angular and TypeScript?Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.
It's not working because angular2 is trying to search for this.window.innerHeight.
Update your component,
@Component({...})
export class MyClass {
myInnerHeight: window.innerHeight;
constructor(){}
}
and use it like this:
<div class="imagecontainer" [style.height.px]="myInnerHeight">
Some code
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With