位置絕對格寬度不匹配父

我改變了孩子div的position到absolute，以便它可以填滿頁面的其餘部分。但現在它的寬度與父母身體不符。代碼並不簡單，因爲我採用了棱角分明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>

候選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/[email protected]" 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格後填補了頁面的其餘部分，但看起來是這樣的：

之前寬度是不錯，但它的高度不灌裝在頁面上。

來源

2017-01-07 Himanshu Yadav

您是否嘗試過加入'寬度：100％'到abspos DIV？另外，將'position：relative'添加到'body'。 –

由於@Michael_B表示父div必須具有'position：relative'屬性。 – Goku

@Michael_B不起作用。它修復了寬度，但我放鬆了頁面的子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; 
}

EDIT

使得格主要以填充可用通過使用Flexbox的整個高度的實施例。

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>

來源

2017-01-07 21:03:54 Stickers

位置絕對格寬度不匹配父

回答

相關問題