Question

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

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

此标头正下方是<app-root></app-root>组件，它由angular自动生成，包含一个div <div id="work-area"><div>。

我想要做的是让这个#work-area div从标题的底部延伸到屏幕的底部，类似screen.height - 24px，如果要在纯javascript中完成的话。

我不确定该怎么做。到目前为止，我尝试了一些方法：

将脚本嵌入到角度HTML模板中，该模板包含用于设置宽度的JavaScript代码。这不起作用，因为angular不支持嵌入式脚本标记。
我尝试使用纯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;
}

Answer 1

您可以使用calc函数完全使用css执行此操作：

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

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

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

1 个答案: