我改变了子div的position至 absolute以便它可以填满页面的其余部分。但现在它的宽度与父主体不匹配。代码并不简单，因为我使用的是 Angular 2。
index.html
<body>
<hp-root></hp-root>
</body>
app.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 .page div 填满了页面的其余部分，但看起来像这样:
在宽度很好但它的高度没有填满页面之前。
最佳答案
一旦你将一个元素设置为 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 填充整个高度的示例。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.header {
background: gold;
}
.main {
background: silver;
flex: 1;
}
.footer {
background: pink;
}<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>关于html - 位置绝对 div 宽度与父级不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41526495/