将元素的高度设置为屏幕高度 - Angular2

问题描述：

我试图将div元素的高度设置为屏幕高度减去固定数量的像素。将元素的高度设置为屏幕高度 - Angular2

我正在构建一个带有角度的单页应用程序，现在它处于初期阶段。该页面目前由一个固定24像素高度的单个标题栏组成。

直接位于此标题下方的是<app-root></app-root>组件，该组件由角度自动生成，其中包含一个div，<div id="work-area"><div>。

我想要做的就是将这个#work-area div从标题底部延伸到屏幕底部，如果要在纯JavaScript中完成，则需要screen.height - 24px。

我不知道如何去做这件事。我到目前为止尝试了几件事：

将脚本嵌入到包含JavaScript代码的角度HTML模板中以设置宽度。这不起作用，因为角度不支持嵌入的脚本标记。
我试着使用纯CSS设置高度，我无法得到这个工作，我很确定纯CSS不会完成这个目标，但如果它确实，它将是首选的方法。
最后我看了一下ngStyle属性指令，但是这只需要纯CSS而不是javascript，所以我遇到了和上面相同的问题。

下面是我的文件柜面它使问题更加清晰：

//app-root component 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: '<div id="work-area"></div>', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
}

的index.html

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>WorkspacePrototype</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 

    <div class="overflowing-bar"> 
     <div id="header"> 

     </div> 
    </div> 


    <app-root>Loading...</app-root> 
</body> 
</html>

全球styles.css的

body, html { 
    width: 100vw; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
} 

.overflowing-bar { 
    overflow: hidden; 
} 

#header/*, #footer*/ { 
    width: inherit; 
    height: 24px; 
    margin: 0 auto; 
    background-color: blue; 
}

答

你可以做到这一点完全使用css，使用calc函数：

https://developer.mozilla.org/en/docs/Web/CSS/calc

#work-area { 
    height: calc(100vh - 24px); 
}

这个工作！谢谢！ – JavascriptLoser

将元素的高度设置为屏幕高度 - Angular2

相关推荐