CSS 设置 Angular 组件的全高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43474361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting full height of Angular Components
提问by mkteagle
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
我不能让我的清单是全高的。我的代码与嵌套组件更复杂。但是我仍然可以使用此代码复制它。这是一个笨蛋。http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
样式文件
html, body {
min-height: 100%;
height: auto;
margin: 0;
}
app.component.css
应用组件.css
.container {
height: 100%;
background: black;
color: white;
list.component.css
列表.组件.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
列表.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>
回答by mkteagle
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.
我通过切换到高度 100vh 并在列表和项目类中添加一个 overflow-y: scroll css 属性来实现这一点。
http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
样式文件
html, body {
min-height: 100vh;
height: auto;
margin: 0;
}
app.component.css
应用组件.css
.container {
height: 100vh;
background: black;
color: white;
list.component.css
列表.组件.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
列表.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>
回答by dhananjay bhirud
try to write this css
尝试写这个css
.container{
min-height:100vh;
}
回答by unitario
Use position: fixedif that's acceptable:
position: fixed如果可以接受，请使用：
.container {
position:fixed;
background: black;
color: white;
height: 100%;
}
回答by Yuri
Had the same issue, and found that the best solution was:
有同样的问题，发现最好的解决方案是：
html, body {
min-height:100vh;
height: auto;
}
and for the container:
对于容器：
.container{
min-height: 100vh;
}
回答by Durga
try in your style.css
试试你的 style.css
html, body {
height: 100%;
margin: 0;
}
