将组件的大小限制为包含 div 的高度
[英] Limiting size of component to containing div's height
本文介绍了将组件的大小限制为包含 div 的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个布局，其中顶部有一个工具栏，左侧有一个侧栏，其余的是内容.
sidenav 包含一个搜索框和一个项目列表.我想要的结果是 sidenav 高度将是它所在行的大小，并且列表将溢出并在该高度内滚动.但是我无法让内部滚动工作，因为内部组件的高度大于包含 div 的高度，并且设置 height: 100% 不起作用.
现在的样子:
你可以看到左边的整个组件都溢出了(我想用 overflow: hidden 结尾去掉外层滚动)，而内层组件只是缩放到全尺寸，并且列表大小不限于组件高度，因为它不限于包含 div 的高度.
这是 HTML 和 CSS:
logs.component.html
<div class="row"><div class="col-3" color="primary" class="sidebar-container"><app-search-sidebar (selectedChanged)="selected=$event" [items]="items"></app-search-sidebar>
<div class="col"><md-tab-group><md-tab [label]="selected"><h1>{{selected}}</h1><p>...</p></md-tab></md-tab-group>
logs.component.css
.row {宽度:100%；边距:0；}.row >.col* {填充:0；}.容器 {显示:弹性；高度:100%；宽度:100%；填充:0；最小高度:计算(100% - 64px)；最大高度:计算(100% - 64px)；}应用搜索侧边栏{溢出-y:自动；显示:块；高度:100%；}.sidebar-容器{最小宽度:300px；/*最大宽度:300像素；*/}.container >md-tab-group {左边距:10px；弹性:1；}
search-sidebar.component.html
<label class="sr-only" for="processName">进程名称</label><div class="input-group mb-2 mr-sm-2 mb-sm-0"><div class="input-group-addon"><md-icon>搜索</md-icon>
<input type="text" [(ngModel)]="searchValue" class="form-control" id="processName" placeholder="进程名称">
<md-grid-list cols="1" rowHeight="40px" style="margin-top: 5px; overflow: scroll"><md-grid-tile *ngFor="let item of items | listFilter:searchValue" colspan="1" rowspan="1"><button md-raised-button [color]="isSelected(item) ? 'primary' : ''" class="process-name" (click)="changeSelected(item)">{{物品}}</md-grid-tile></md-grid-list>
search-sidebar.component.css
.process-name {宽度:100%；白颜色;文本对齐:居中；边框半径:4px；}MD-网格列表{最小高度:计算(100% - 24px)；最大高度:计算(100% - 24px)；}
解决方案
md-grid-list::-webkit-scrollbar {宽度:0px；高度:0px；}
I have a layout which contains of a toolbar at the top, a sidenav on the left, and the rest is content.
The sidenav contains of a searchbox and a list of items. My desired outcome is that the sidenav height will be the size of the row it's in, and that the list will overflow and scroll inside that height. But I can't get the inner scroll to work, since the inner component's height is larger than the containing div's height, and setting height: 100% doesn't work.
This is how it looks right now:
You can see that the entire component on the left is overflowing (I want to remove the outer scroll with overflow: hidden in the end), and the inner component just scales to full size, and the list size isn't limited to the component hieght, since it's not limited to it's containing div's height.
This are the HTML's and CSS's:
logs.component.html
<div class="container">
<div class="row">
<div class="col-3" color="primary" class="sidebar-container">
<app-search-sidebar (selectedChanged)="selected=$event" [items]="items"></app-search-sidebar>
</div>
<div class="col">
<md-tab-group>
<md-tab [label]="selected">
<h1>{{selected}}</h1>
<p>...</p>
</md-tab>
</md-tab-group>
</div>
</div>
</div>
logs.component.css
.row {
width: 100%;
margin: 0;
}
.row > .col* {
padding: 0;
}
.container {
display: flex;
height: 100%;
width: 100%;
padding: 0;
min-height: calc(100% - 64px);
max-height: calc(100% - 64px);
}
app-search-sidebar {
overflow-y: auto;
display: block;
height: 100%;
}
.sidebar-container {
min-width: 300px;
/*max-width: 300px;*/
}
.container > md-tab-group {
margin-left: 10px;
flex: 1;
}
search-sidebar.component.html
<div style="padding: 10px">
<label class="sr-only" for="processName">Process Name</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">
<md-icon>search</md-icon>
</div>
<input type="text" [(ngModel)]="searchValue" class="form-control" id="processName" placeholder="Process Name">
</div>
<md-grid-list cols="1" rowHeight="40px" style="margin-top: 5px; overflow: scroll">
<md-grid-tile *ngFor="let item of items | listFilter:searchValue" colspan="1" rowspan="1">
<button md-raised-button [color]="isSelected(item) ? 'primary' : ''" class="process-name" (click)="changeSelected(item)">
{{item}}
</button>
</md-grid-tile>
</md-grid-list>
</div>
search-sidebar.component.css
.process-name {
width: 100%;
color: white;
text-align: center;
border-radius: 4px;
}
md-grid-list {
min-height: calc(100% - 24px);
max-height: calc(100% - 24px);
}
解决方案
md-grid-list::-webkit-scrollbar {
width: 0px;
height: 0px;
}
这篇关于将组件的大小限制为包含 div 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
