由Angular的路由器出口引起的100%高度的身体高于100vh

Question

我有一个有角度的页面,home,由2个组件和一个路由器插座组成

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

我希望上面的家用容器始终至少是全屏高度.标题应该显示,然后是子标题,那么路由器出口的内容应该总是至少填满屏幕的其余部分(如果当然有更多的内容,则更多).

通常这很容易,但似乎路由器插座搞乱了.可以看到示例http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas,点击运行然后单击"英雄"链接进行路由.在这个例子中,我不希望Heroes div比屏幕更高,并且不明白它为什么.

我完成这个任务的风格是.(假设路由器插座位于'my-page')

html, body {
  height: 100%;
}

.home-container {
   height: 100%;
}

.my-page {
  height: 100%;
}

我的期望显然是家庭容器是全屏,显示标题,显示子标题,然后我的页面填充至少垂直高度的其余部分.

但实际发生的情况是,有一个可用高度的滚动条看起来与我的标题和子标题相同.

这个plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas说明了我的意思.如果单击"运行",然后单击"英雄"链接,您将看到路由器插座内容,在本例中为heroes-list.component,带有绿色背景.我不明白为什么当一切都设置为100%时,这里的绿色在屏幕下方流血

更新我尝试在此嵌套中使用各种不同的CSS属性到不同的级别.包括100vh vs 100%,min-height vs height,以及body/html/home-container/my-page的每个组合.我也尝试过与Angular的CSS :host相同的结果,没有什么不同

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

最终更新以下答案可能对某些应用程序很有用,但我最终只是通过给.my-page指定一个高度来解决它,这样height: calc(100vh - $headerheight - $subheaderheight)就可以完成工作了

Answer 1

据我了解，孩子的100％等于父母自然身高的大小。如果您想填补可用空间，那么除非您需要支持IE9及以下版本，否则实际上应该使用flex。

我会更新您的锚点，使其包含在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;
}

要测试的柱塞：http ://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview

在chrome上，由于机身上有8px的空白，我仍然具有滚动条-可以轻松地使用CSS移除此滚动条，以实现无滚动的全高度体验。