設置角度組件的全高

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; 
}