设置角组件的全高 [英] Setting full height of Angular Components

问题描述

我的名单无法全高.嵌套组件使我的代码更复杂.但是我仍然可以使用此代码来复制它.这是一个小家伙. http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

I cannot get my list to be full height. My code is more complicated with nested components. But I can still get this to replicate using this code. Here is a plunk. http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

styles.css

styles.css

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

app.component.css

app.component.css

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

list.component.css

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

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>

推荐答案

我通过切换到高度为100vh并添加溢流y来实现此目的:将css属性滚动到列表和项类.

I got this to work by switching to height 100vh and also adding a overflow-y: scroll css attribute to the list and item classes.

http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

styles.css

styles.css

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

app.component.css

app.component.css

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

list.component.css

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

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>

这篇关于设置角组件的全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！