Angular2 <div>占全屏尺寸

Question

我正在构建一个Angular2应用程序并遇到以下问题，我似乎无法解决或找到解决方案。这是我的页面图像：

代码：

content.component.html

<app-header></app-header>
<div class="content">

</div>

content.component.css

.content{
 height: calc(100vh - 60px);
 background-color: rgb(167, 167, 167);
}

标题的固定高度为60px;

我想给内容组件添加背景颜色，我正在寻找具有以下属性的<div>：

1. <div>需要填满整个页面，但不要超过此值（如果没有必要，则不需要滚动条）。
2. 每当滚动条到达时，<div>都会自动调整大小（当屏幕宽度越来越小，内容压在彼此之上时）。

我尝试了height: calc(100vh - headercomponentHeight)，但是当内容堆叠并弹出滚动条时会出现问题，因为内容会从<div>流出。

Answer 1

这样的事情应该有效

header {
  background: #ccc;
  height: 60px;
}

main {
  background: #ddd;
  min-height: calc(100vh - 60px);
  position: relative;
  padding: 20px;
}

<header></header>
<main class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
</main>