我正在尝试设置 div 的高度元素到屏幕高度减去固定数量的像素。
我正在构建一个带 Angular 单页应用程序，现在它还处于起步阶段。该页面目前包含一个固定 24 像素高度的标题栏。
此 header 的正下方是 <app-root></app-root>由angular自动生成的组件，包含一个div，<div id="work-area"><div> .
我想做的是拥有这个 #work-area div 从标题底部延伸到屏幕底部，类似于 screen.height - 24px如果这是在纯 javascript 中完成的。
我不确定该怎么做。到目前为止，我尝试了一些事情:
- 将脚本嵌入到包含用于设置宽度的 javascript 代码的 Angular HTML 模板中。这不起作用，因为 Angular 不支持嵌入式脚本标签。
- 我尝试使用纯 CSS 设置高度，但无法正常工作，而且我很确定纯 CSS 无法实现此目标，但如果可以，这将是首选方法。
- 最后我看了一下
ngStyleattribute 指令，但这只采用纯 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>
全局样式.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);
}
关于javascript - 将元素的高度设置为屏幕高度 - Angular2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40965466/