设置 Angular 组件的全高

Question

我不能让我的清单全高。我的代码使用嵌套组件更复杂。但是我仍然可以使用此代码进行复制。这是一个笨拙的。 http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

样式.css

 html, body {
  min-height: 100%;
  height: auto;
  margin: 0;
}

app.component.css

 .container {
height: 100%;
background: black;
color: white;

list.component.css

 .row {
  display: flex;
  flex-direction: row;
}
.list {
  width: 33%;
  height: 100%;
  flex-direction: column;
  display: flex;
  border-right: groove white 1px;
  border-top: groove white 1px;
}
.item {
  width: auto;
  height: 100%;
  flex-direction: column;
  display: flex;
}

list.component.html

 <div class="contents">
  <button (click)="updateDocuments()">Update Document</button>
  <div class="row">
    <div class="list">
      <div *ngFor="let document of documents; let i = index;">
        {{i + 1}}. {{document}}
      </div>
    </div>
    <div class="item">
      this is an item
    </div>
  </div>
</div>

原文由 mkteagle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过切换到高度 100vh 并在列表和项目类中添加一个溢出-y：滚动 css 属性来实现这一点。

http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

样式.css

 html, body {
  min-height: 100vh;
  height: auto;
  margin: 0;
}

app.component.css

 .container {
height: 100vh;
background: black;
color: white;

list.component.css

 .row {
  display: flex;
  flex-direction: row;
}
.list {
  width: 33%;
  height: 100vh;
  flex-direction: column;
  display: flex;
  border-right: groove white 1px;
  border-top: groove white 1px;
  overflow-y: scroll;
}
.item {
  width: auto;
  height: 100vh;
  flex-direction: column;
  display: flex;
  overflow-y: scroll;
}

list.component.html

 <div class="contents">
  <button (click)="updateDocuments()">Update Document</button>
  <div class="row">
    <div class="list">
      <div *ngFor="let document of documents; let i = index;">
        {{i + 1}}. {{document}}
      </div>
    </div>
    <div class="item">
      this is an item
    </div>
  </div>
</div>

原文由 mkteagle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试编写此 css

 .container{
    min-height:100vh;
}

原文由 dhananjay bhirud 发布，翻译遵循 CC BY-SA 3.0 许可协议