设置行高不低于页面底部 bootstrap

Question

我正在尝试制作一个 sidenav，它将根据 window 大小缩放它的大小。

我给它一个项目列表，这些项目的总和高于 window 高度。我想让它成为一个可滚动的列表，而不设置最大高度，而是让它始终是 window 高度。

这是目前的样子：

可以看到window向下滚动，sidenav滚动被禁用。我已经尝试了很多东西，目前这是我的代码状态：

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 设置为 "display: flex; overflow-y: auto"。

您很少会在 angular 类中放置布局代码。

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

设置行高不低于页面底部 bootstrap

setting row height not to go below bottom of page bootstrap

layout

bootstrap-4

angular-material2

angular

logs.component.html

logs.component.css

logs.component.ts

搜索-sidebar.component.html

搜索-sidebar.component.css

搜索-sidebar.component.ts

logs.component.css