位置绝对div宽度与父级不匹配

时间：2017-01-07 20:59:40

标签： html css css3

我将子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>

候选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 个答案:

答案 0 :(得分：3)

将元素设置为position: absolute后，将其从正常内容流中删除，元素的大小将是内部内容的大小，除非声明width和{ {1}}，或设置相关的height，top，right和bottom值。

使位置绝对元素占据最近容器的整个宽度的示例，left设置为position以外，或者它位于static标记的正下方。

body

或

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

修改

使用flexbox使div main填充整个高度的示例。

.page {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
.header {
  background: gold;
}
.main {
  background: silver;
  flex: 1;
}
.footer {
  background: pink;
}

相关问题
最新问题