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
innerHeight
of 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