角型コンポーネントの高さを設定する

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

を書いてみますオーバーフロー-y：scroll css属性をリストクラスとアイテムクラスに追加しました。list.component.html

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

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