Css 100%高度身体高于100vh，由角度'引起；s路由器出口

我有一个有角度的主页，它由两个组件和一个路由器插座组成

<div class="home-container">
  <header></header>
  <sub-header></sub-header>
  <router-outlet></router-outlet>
</div>

我在这里的期望显然是主容器是全屏的，显示标题，显示子标题，然后我的页面以最小的垂直高度填充其余部分

但实际发生的是，有一个滚动条，其可用高度与我的标题和子标题相同

这个plnkr正好说明了我的意思。如果单击Run，然后单击“Heroes”链接，您将看到路由器出口内容，在本例中为Heroes-list.component，背景为绿色。我不明白，当一切都设置为100%时，为什么屏幕下方的绿色会流血

更新在这个嵌套中，我尝试了在不同的级别使用各种不同的CSS属性。包括100vh vs 100%，最小高度vs高度，以及body/html/home container/my page的每个组合。我也尝试了Angular的CSS

：host

，同样的结果没有什么不同

Update2如果我将其移出元素，那么一切都会按照您的预期运行，并且没有垂直滚动条。关于路由器出口包装的一些东西在某处增加了垂直空间，但我无法找出它的位置或原因

---

最终更新以下答案可能对某些应用程序有用，但我最终解决了这个问题，给了我的页面一个指定的高度，只做了

高度：calc（100vh-$headerheight-$subheaderheight）

，就我所知，它完成了工作

，孩子100%的身高将等于父母的身高。如果你想填满可用的空间，你真的应该使用flex，除非你需要支持IE9及以下版本

我会将您的锚更新为包含在div（或其他包装器）中

要测试的插入器：

---

在chrome上，由于机身上有8px的边距，所以我仍然有滚动条-这可以通过CSS轻松删除，以获得无滚动的全高体验。

首先，您应该重置浏览器默认样式，至少是这样：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

然后，如果愿意的话，您可以通过将页面拆分为带有预设分区的标题部分和主要内容部分，在不使用flex布局的情况下实现您想要的内容。。。因此，让我们假设标题和链接一起进入一个容器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;
}

---

有两个原因使

元素高于视口的100%：

来自浏览器内置样式的

元素的默认边距通常为

8px

。这意味着

元素将与

元素一样高，但其上方和下方也将有8px的空间，从而导致

元素溢出

由于以下原因，

元素的上边距从容器中“脱落”。这使得

元素上方的空间等于

的默认上边距（约为21px，而不是8px）

---

将零边距设置为

（托塔里回答的一部分）有助于解决第一个问题。要解决第二个问题，您应该使用

元素或（可能更好的）

.my app

容器建立新的。最简单、最跨浏览器的方法是设置容器

溢出：隐藏

（其他选项有

显示：flow root

，适用于现代Chrome/Firefox，或

列计数：1

，适用于IE10+和所有现代浏览器，您可以比较几乎所有选项）。

尝试使用

100vh！重要信息

而非

100%

适用于您的height@tobie根据我的更新，我尝试过在100vh和100%（带重要标志）之间切换任意/全部和任意组合，不幸的是，同样的结果-你可以查看附带的plnkr以获得一个真实的示例我很惊讶以百分比表示的高度在这里有任何影响。要使CSS中的百分比高度起作用，父元素需要显式的高度，否则计算的值将变为自动。当我在Chrome中检查DOM时，您的

.home container

元素被包装在一个

元素中，该元素的父元素是

，并且对于这两种样式，都不在inspector中显示。。。所以说，

.home container

是如何受到高度的影响的：100%对我来说是个谜，老实说。@CBroe是的，未定义的元素是由Angular生成的，用于插入路由器出口的内容“孩子的100%大小等于父母的自然高度”-这仅适用于绝对位置的儿童。对于静态定位的元素，100%的高度始终意味着父元素指定高度的100%。我不喜欢这个答案，最终没有使用它。我们不应该以未定义的元素为目标。我授予你奖金，因为我认为这个答案对未来的读者最有帮助。我认为未定义的元素首先不应该存在，这将否定操纵它的必要性。请在这里回复，一旦你找到了一个可接受的解决方案，我想知道。对我来说，它没有未定义的位工作。flex就是它所需要的。我想你可能误解了这个问题。您指定的这两个问题不是核心问题-事实上，海报希望子元素填充父元素的剩余垂直空间，但它变为与父元素相同的高度。这是延伸通过pare底部的孩子

.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;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

* {
  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;
}