将组件的大小限制为包含div的高度 [英] Limiting size of component to containing div's height

问题描述

我有一个布局，其中包含一个顶部的工具栏，一个左侧的sidenav和其余的内容.

I have a layout which contains of a toolbar at the top, a sidenav on the left, and the rest is content.

sidenav包含一个搜索框和一个项目列表.我期望的结果是，sidenav高度将是其所在行的大小，并且列表将溢出并在该高度内滚动.但是我无法使用内部滚动，因为内部组件的高度大于包含div的高度，并且设置height: 100%不起作用.

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.

这是现在的样子:

您可以看到左侧的整个组件都溢出了(我想删除最后一个overflow: hidden的外部滚动条)，而内部组件只是可以缩放到完整大小，列表大小不受限制到组件hieght，因为它不仅限于包含div的高度.

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.

这是HTML和CSS:

This are the HTML's and CSS's:

<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屋！