Angular 将行高度设置为不低于页面引导的底部

我正在尝试制作一个sidenav，它可以根据窗口大小调整大小

我给它一个项目列表，这些项目加起来比窗户高。我想让它成为一个可滚动的列表，不设置最大高度，而是让它始终是窗口高度

这就是它目前的样子：

您可以看到窗口向下滚动，sidenav滚动被禁用。我尝试了很多方法，目前我的代码状态如下：

logs.component.html logs.component.ts search-sidebar.component.ts

从'@angular/core'导入{Component，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序搜索侧栏”，
templateUrl:“./search sidebar.component.html”，
样式URL:['./搜索侧栏.component.css']
})
导出类SearchSidebarComponent{
@Input（）公共项：字符串[]=[]；
@Output（）selectedChanged:EventEmitter=new EventEmitter（）；
私有_选择：字符串=“”；
私有搜索值：字符串；
changeSearch（搜索：字符串）{
this.searchValue=搜索；
}
isSelected（项目：字符串）{
返回此项。所选===项；
}
更改选定项（选定项：字符串）{
如果（this.selected！==selected）{
this.selected=selected；
}
}
获取选定项（）{
返回此项。\u选中；
}
设置选定项（选定项：字符串）{
此。_selected=selected；
this.selectedChanged.emit（this.selected）；
}
}

---

我正在尽可能地使用Angular Material 2，否则纯引导4可以通过CSS和flex来实现

工作示例：

诀窍是将HTML和BODY的高度设置为100%，并将所有父DIV设置为container DIV。然后将container DIV设置为“display:flex；overflow-y:auto”

---

很少在angular类中使用布局代码。

答案是在css中使用

calc

，因为工具栏也有一定的高度

最后，这就是css：

logs.component.css

---

我没有提到的是，我在顶部也有一个工具栏，它确实比顶部高一点，虽然我还没有检查，但当我在容器上使用100%高度时，它很可能会溢出工具栏的高度。你知道如何使用工具栏吗？可能会做一个

top:-TOOLBAR HEIGHTpx

技巧之类的事情？我已经设法使用

calc（100%-64px）

来限制组件的包含div高度，但是现在，内部组件不会根据它包含的div进行缩放（内部div高度大于它包含的div高度）。这是我打开的新帖子，以防你需要帮助：

http://stackoverflow.com/questions/41563621/limiting-size-of-component-to-containing-divs-height

无需使用计算器或以像素为单位指定高度-每个div可以自行调整大小。诀窍是在容器上使用另一个flex（这次是垂直的），并将工具栏和日志面板放在其中：

.container{display:flex；height:100%；flex direction:column；}.logpanel{display:flex；}

更新示例：

<div class="container" [style.max-height]="containerHeight()" (window:resize)="resize($event.target.innerHeight)">
  <div class="row">
    <div class="col-2" color="primary">
      <app-search-sidebar (selectedChanged)="selected=$event" [items]="items"></app-search-sidebar>
    </div>
    <div class="col-10">
      <md-tab-group>
        <md-tab [label]="selected">
          <h1>{{selected}}</h1>
          <p>...</p>
        </md-tab>
      </md-tab-group>
    </div>
  </div>
</div>

.container {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.row {
    height: 100%;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.row > div {
    padding: 10px;
}

import { Component, OnInit } from '@angular/core';
import { ProcessesList } from './mock_data';

@Component({
  selector: 'app-logs',
  templateUrl: './logs.component.html',
  styleUrls: ['./logs.component.css']
})
export class LogsComponent {

  items: string[] = ProcessesList;
  selected: string = '';
  height: number;


  containerHeight(): number {
    return this.height <= 0 ? window.innerHeight : this.height;
  }

  resize(height: number) {
    this.height = height;
  }
}

<div>
  <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>
  <div class="process-list">
    <md-list>
      <md-list-item *ngFor="let item of items | listFilter:searchValue">
        <button md-raised-button [color]="isSelected(item) ? 'primary' : ''"
                class="process-name" (click)="changeSelected(item)">
          {{item}}
        </button>
      </md-list-item>
    </md-list>
  </div>
</div>

.process-name {
    width: 100%;
}

.process-list {
    overflow-y: scroll;
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search-sidebar',
  templateUrl: './search-sidebar.component.html',
  styleUrls: ['./search-sidebar.component.css']
})
export class SearchSidebarComponent {
  @Input() public items: string[] = [];
  @Output() selectedChanged: EventEmitter<string> = new EventEmitter<string>();
  private _selected: string = '';
  private searchValue: string;

  changeSearch(search: string) {
    this.searchValue = search;
  }

  isSelected(item: string) {
    return this.selected === item;
  }

  changeSelected(selected: string) {
    if (this.selected !== selected) {
      this.selected = selected;
    }
  }

  get selected() {
    return this._selected;
  }
  set selected(selected: string) {
    this._selected = selected;
    this.selectedChanged.emit(this.selected);
  }
}

.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;*/
}