设置行高不要低于页面底部引导程序

Question

我试图制作一个侧窗，根据窗口大小调整它的大小。

我给它一个项目列表，它们的组合比窗口高度高。我想让它成为一个可滚动的列表，不设置max-height，而是让它始终是窗口高度。

目前的情况如下：

您可以看到窗口向下滚动，侧面滚动被禁用。我尝试了很多东西，目前这是我的代码状态：

logs.component.html

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

logs.component.css

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

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

.row > div {
    padding: 10px;
}

logs.component.ts

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

这是一个相当奇怪的尝试，但它仍然没有帮助。

内部组件：

搜索sidebar.component.html

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

搜索sidebar.component.css

.process-name {
    width: 100%;
}

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

搜索sidebar.component.ts

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

我可以使用Angular Material 2，否则使用纯Bootstrap 4

Answer 1

这一切都可以通过CSS和使用flex完成！

工作示例：http://embed.plnkr.co/5NsImxRJc5dvddfnr6s6/

诀窍是将HTML和BODY的高度设置为100％，以及将所有父DIV设置为容器DIV。然后将容器DIV设置为＆＃34; display：flex; overflow-y：auto＆＃34;。

您很少将布局代码放在角度类中。

Answer 2

答案是在css中使用calc，因为工具栏也有一些高度。

最后，那就是css：

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