位置绝对 div 宽度与父级不匹配
我将子 div 更改position为，absolute以便它可以填满页面的其余部分。但现在它的宽度与父主体不匹配。代码并不简单，因为我使用的是 Angular 2。
索引.html
<body>
<hp-root></hp-root>
</body>
应用程序.html
<div>
<md-toolbar class="toolbar">
<img src="../assets/logo_3x.png" class="top-logo"/>
<a class="top-link">Home</a>
<a class="top-link">Candidates</a>
<a class="top-link">Jobs</a>
<a class="top-link">Blog</a>
<a class="top-link">Login</a>
</md-toolbar>
</div>
<hp-candidate-list></hp-candidate-list>
候选列表.html
<div class="page">
<h1>
{{title}}
</h1>
<div class="items">
<md-nav-list *ngFor="let candidate of candidates">
<md-list-item>
<img src="../../../assets/reminder-active@3x.png" class="reminder">
<span class="name">{{candidate.name}}</span>
<span>{{candidate.experiences[0].title}} at {{candidate.experiences[0].companyName}}</span>
<span>{{candidate.skills[0].name}}, {{candidate.skills[1].name}}, {{candidate.skills[2].name}}</span>
</md-list-item>
</md-nav-list>
</div>
</div>
CSS：
body {
width: 960px;
margin: 0 auto;
}
.page {
overflow: hidden;
height: 100%;
position: absolute;
background-color: gainsboro;
}
div.items {
max-width: 90%;
position: relative;
left: 5%;
right: 5%;
background-color: #FFFFFF;
}
添加position: absolute .pagediv 后填满页面的其余部分，但看起来像这样：
在宽度很好但它的高度没有填满页面之前。
一旦您设置一个元素position: absolute，从正常的内容流，消除它的元素的大小将里面的内容的大小，除非申报width和height，或一组相关的top，right，bottom和left值。
使位置绝对元素占据最近容器的全宽的示例，position除了 之外static，或者如果它直接位于body标记下方。
.page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
或者
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
}
编辑
使用 flexbox 使 div main 填充整个高度的示例。
.page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
}