设置角度组件的全高

Question

我无法让我的列表成为全高。我的代码更复杂的嵌套组件。但是我仍然可以使用这段代码来复制它。这是一个庞然大物。 http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

styles.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> 

Answer 1

我这来切换到工作高度100vh，并在列表和项目类中添加overflow-y：scroll css属性。

http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

styles.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> 

Answer 2

使用position: fixed如果这是可以接受的：

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

Answer 3

尝试在你的style.css

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

Answer 4

尝试写这个CSS

.container{ 
    min-height:100vh; 
}