Question

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

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

我希望上面的家用容器始终至少是全屏高度。标题应该显示，然后是子标题，然后路由器插座的内容应该总是至少填满屏幕的其余部分（如果当然还有更多的内容，则更多）。

通常这很容易，但似乎路由器出口正在弄乱它。可以看到示例http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas，点击运行然后点击＆＃34;英雄＆＃34;链接到路线。在这个例子中，我不希望Heroes div比屏幕更高，并且不明白它为什么。

我完成这个任务的风格是。（假设路由器插座位于＆＃39; my-page＆＃39;）

html, body {
  height: 100%;
}

.home-container {
   height: 100%;
}

.my-page {
  height: 100%;
}

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

实际上发生了什么，是否有一个可用高度的滚动条看起来与我的标题和子标题相同。

这个plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas说明了我的意思。如果单击“运行”，然后单击“＃34;英雄＆＃34;”的链接。您将看到路由器插座内容，在本例中为heroes-list.component，带有绿色背景。我不明白为什么当一切都设置为100％

时，这里的绿色在屏幕下方出血

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

Update2 如果我将其移出元素，那么一切都表现得像您期望的那样，并且没有垂直滚动条。有关路由器插座封装器的东西会在某处增加垂直空间，但我无法弄清楚导致它的位置或原因。

最终更新以下答案可能对某些应用程序有用，但我最后只是通过给.my页面指定高度来解决它，只需执行height: calc(100vh - $headerheight - $subheaderheight)即可获得作业完成

Answer 1

据我了解，对孩子的100％将等于父母自然身高的大小。如果你想填补可用的空间，你真的应该使用flex，除非你需要支持IE9及以下版本。

我会更新您的Anchor以包含在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轻松移除，以获得无滚动的全高度体验。

Answer 2

首先，您应该至少以某种方式重置浏览器默认样式：

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

然后你可以在没有弹性布局的情况下实现你想要的东西，如果通过将页面拆分为标题部分和主要内容部分以及预设的分区来优先...那么让我们说标题和链接一起放入容器div中即高度为20％，目前在标签“未定义”中保留的主要内容的高度为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;
}

Answer 3

有两个原因导致<body>元素高于视口的100％：

来自浏览器内置样式的<body>元素的默认边距，通常为8px。这意味着<body>元素将与<html>元素一样高，但也会在其上方及其下方留出8px空间，从而导致<html>元素溢出。
由于margin collapsing，<h1>元素的上边距从容器中“掉出来”。这使得<body>元素上方的空格等于<h1>的默认上边距（约21px而不是8px）。

将零边距设置为<body>（ToTaTaRi的答案的一部分）可帮助您解决第一个问题。要解决第二个问题，您应该使<body>元素或（可能更好）.my-app容器建立新的Block Formatting Context。最简单，最跨浏览的方式是设置容器overflow:hidden（其他选项为display:flow-root，适用于现代Chrome / Firefox，或column-count:1，适用于IE10 +和所有现代浏览器，您可以比较几乎所有选项in this live example）。

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

3 个答案: