css - Angular 中的“屏幕大小”应用

Question

我正在尝试在 Angular 中创建一个“屏幕尺寸”应用程序。应用程序的总高度（包括标题、工具栏、带有路由器插座等的“内容区域”）应该是屏幕大小（100vh）。即没有“html body”滚动。

内容区域中的子组件应扩展到屏幕底部。换句话说，填充容器的高度（内容区域）。

实现这一目标的最佳方法是什么？

我最接近的是将以下内容添加到 styles.css 文件中：

app-root {
    display: block;
    height: 100vh;
}

但是将组件内部的一些设置为 {height : 100%} 似乎不会使其扩展到屏幕底部。

标签： cssangularflexbox

Answer 1

要实现这一点，您必须将父 div 的高度设为 100%

html, body {height: 100%;}

必须添加，

供您参考http://me.expanse.me/，是根据您的要求构建的网站（html 和 css 网站），希望对您有所帮助。