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

Question

I changed child div's position to absolute so that it can fill up rest of the page. 我将child div的position更改为absolute position ，以便它可以填满页面的其余部分。 But now it's width doesn't match with parent body. 但是现在它的宽度与母体不匹配。 Code is not straightforward as I am using Angular 2. 代码不是很简单，因为我正在使用Angular 2。

index.html index.html

<body>
  <hp-root></hp-root>
</body>

app.html 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 候选人名单.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: 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;
}

After adding the position: absolute .page div fills up rest of the page but looks like this: 添加position: absolute .page div会填满页面的其余部分，但看起来像这样：

Before width was fine but it's height wasn't filling up the page. 之前宽度还不错，但高度没有填满页面。

Answer 1

Once you set an element to position: absolute , that removes it from the normal content flow, the size of the the element will be the size of the content inside, unless to declare the width and height , or set relevant top , right , bottom and left values. 将元素设置为position: absolute并将其从常规内容流中删除后，该元素的大小将为内部内容的大小，除非声明width和height或设置相关的top ， right ， bottom和left值。

Example of making an position absolute element to take full width of the closest container with position set other than static , or if it sits directly under body tag. 设置位置绝对元素的示例，使其position设置为static以外的其他最接近容器的完整宽度，或者直接位于body标签下。

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

or 要么

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

EDIT 编辑

Example of making div main to fill entire height available by using flexbox. 使用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