位置的絕對div寬度與父項不匹配

Question

我將child div的position更改為absolute position ，以便它可以填滿頁面的其余部分。 但是現在它的寬度與母體不匹配。 代碼不是很簡單，因為我正在使用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會填滿頁面的其余部分，但看起來像這樣：

之前寬度還不錯，但高度沒有填滿頁面。

Answer 1

將元素設置為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主要填充整個高度的示例。

 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>

位置的絕對div寬度與父項不匹配

問題描述

1 個解決方案

解決方案1
3 已采納 2017-01-07 21:03:54

位置的絕對div寬度與父項不匹配

問題描述

1 個解決方案

解決方案1 3 已采納 2017-01-07 21:03:54

解決方案1
3 已采納 2017-01-07 21:03:54