logo标签列表

绝对定位的 div 宽度与父元素不匹配

htmlcss
4
我将子 div 的 position 更改为 absolute，以便它可以填充页面的其余部分。但现在它的宽度与父 body 不匹配。代码不太直观，因为我正在使用 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>

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填满了页面的剩余部分，但是它看起来像这样：enter image description here。之前宽度没问题，但高度没有填满整个页面。
1
你尝试过将 width: 100% 添加到绝对定位的 div 吗？此外，将 position: relative 添加到 body。 - Michael Benjamin
正如 @Michael_B 所说，父级 div 必须具有 position:relative 属性。 - Goku
@Michael_B 不起作用。它固定了宽度，但我失去了页面的子div，高度也没有覆盖页面的其余部分。 - Himanshu Yadav
重要的是（也是SO指南的一部分），您在问题中提供所有相关代码。这样可以让我们重现问题并更有效地帮助您。否则，我们会浪费时间猜测和走错路线。 - Michael Benjamin
@Michael_B 已更新其余代码。希望现在更加清晰明了。 - Himanshu Yadav
你的页眉高度固定吗？ - Asons
1个回答
5
一旦您将元素设置为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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接