我有一个有角度的主页，它由2个组件和一个路由器出口组成
<div class="home-container">
<header></header>
<sub-header></sub-header>
<router-outlet></router-outlet>
</div>
我希望上面的主容器至少始终是全屏高度。标题应该显示，然后是子标题，然后路由器出口的内容应该总是至少填满屏幕的其余部分(当然，如果有更多内容，则会更多)。
通常情况下，这很容易，但路由器插座似乎把它搞砸了。可以看到示例http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas，点击run，然后点击"英雄"链接到路线。在这个例子中，我不希望Heroesdiv比屏幕高，也不明白为什么
我的风格是这样的。(假设路由器出口在"我的页面"上)
html, body {
height: 100%;
}
.home-container {
height: 100%;
}
.my-page {
height: 100%;
}
我在这里的期望显然是主容器是全屏的，显示标题，显示子标题，然后我的页面以最小的垂直高度填充其余部分。
然而，实际发生的是，有一个可用高度的滚动条，看起来与我的标题和子标题相等。
这个plnkrhttp://plnkr.co/edit/56k9ZabLAGujBoX8Lsas正好说明了我的意思。如果你点击Run，然后点击"Heroes"链接，你会看到路由器出口的内容，在本例中是Heroes-list.component，背景为绿色。我不明白为什么当一切都设置为100%时，屏幕下方的绿色会流血
更新我已经尝试在这个嵌套中使用各种不同的CSS属性到不同的级别。包括100vh vs 100%，最小高度vs高度，以及body/html/home container/my page的每个组合。我也用Angular的CSS:host尝试过同样的方法，结果没有不同的
Update2如果我将它移出元素，那么一切都会如您所期望的那样进行，并且没有垂直滚动条。路由器出口包装器的某些地方增加了垂直空间，但我不知道是哪里或什么原因造成的
最终更新以下答案可能对某些应用程序有用，但我最终只是通过给.my页面指定高度来解决它，只需执行height: calc(100vh - $headerheight - $subheaderheight)即可完成任务
据我所知，孩子100%的身高将等于父母的自然身高。如果你想填补可用的空间，你真的应该使用flex，除非你有支持IE9及以下版本的要求。
我会更新你的锚，使其包含在div(或另一个包装器)中
<h1 class="title">Component Router</h1>
<div>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</div>
<router-outlet></router-outlet>
然后我会利用flexbox允许内容根据需要扩展
.hero-list {
background-color: green;
height: 100%;
overflow:auto
}
undefined {
flex: 1;
}
body, html, my-app {
height: 100%;
}
my-app{
display: flex;
flex-flow: column;
}
要测试的Plunker：http://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview
在chrome上，由于机身上有8px的边距，我仍然有滚动条——这可以很容易地用CSS删除，以获得无滚动的全高体验。
有两个原因会使<body>元素的高度超过视口的100%：
<body>元素的默认边距来自浏览器的内置样式，通常为8px。这意味着<body>元素将与<html>元素一样高，但其上下也将有8px的空间，从而导致<html>元素溢出<h1>元素的上边距由于边距折叠而从容器中"脱落"。这使得<body>元素上方的空间等于<h1>的默认上边距(约21px，而不是8px)
将零裕度设置为<body>(ToTaTaRi答案的一部分)可以帮助您解决第一个问题。要解决第二个问题，您应该使<body>元素或(可能更好).my-app容器建立新的块格式化上下文。最简单、最跨浏览器的方法是设置容器overflow:hidden(其他选项是适用于现代Chrome/FFirefox的display:flow-root，或适用于IE10+和所有现代浏览器的column-count:1，您可以比较此示例中的几乎所有选项)。
首先，您应该重置浏览器默认样式，至少如下所示：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
然后，如果你喜欢的话，你可以在没有灵活布局的情况下通过将页面拆分为带有预设分区的标题部分和主要内容部分来实现你想要的。。。因此，假设标题和链接一起进入一个容器div，即高度为20%，而当前保存在标签"undefined"中的主要内容的高度为80%，如果您现在将应用程序容器的高度设置为100%或100vh，它应该可以按预期工作！
编辑(因为主题仍然打开…)：
你试过上面解释的css代码吗，它的工作原理很有魅力！？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, my-app {
height: 100%;
height: 100vh;
}
h1 , h1 + div {
height: 10%;
height: 10vh;
}
undefined {
display: block;
background-color: green;
min-height: 80%;
min-height: 80vh;
}