html - 你如何在 Angular 中正确对齐所有内容？

Question

我正在尝试在 Angular 5 中进行一些实践。我对 Bootstrap 不太熟悉。

如您所见，我正在尝试创建不同的组件。

很少有组件在另一个内部。

如您所见，是我在这里声明的组件。

import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { ChatWindowComponent } from './chat-window/chat-window.component';
import { TextSideComponent } from './chat-window/text-side/text-side.component';

chat-window.component.html 在这里

<div class="container-fluid bg-danger">


  <div class="row">
    <div class="col-4">
      hi
      <app-text-side></app-text-side>
    </div>
    <div class="col-8">
      yes hope this works
    </div>


  </div>


</div>

但我想将这个红色组件扩展到屏幕底部。这样这个组件的大小就是全窗口的。 所以我将 Bootstrap 类 .position-absolute .h-100 添加到 ChatWindowComponent 的容器中。像这样。

<div class="container-fluid bg-danger position-absolute h-100">


  <div class="row">
    <div class="col-4">
      hi
      <app-text-side></app-text-side>
    </div>
    <div class="col-8">
      yes hope this works
    </div>


  </div>


</div>

我得到了这个输出。

但是如您所见，有一个滚动条。

它在下方进一步扩展，因此基本上忽略了 nav-bar.component 的高度，并从 ChatWindowComponent(容器)开始了 100% 的窗口高度。

我试过使用 calc 函数计算高度但没有静脉。

有更好的方法吗？因为我无法始终计算 nav-bar.component 高度。它可能会有所不同。

有没有更好的方法从 CSS 的 Angular 理解 Angular？如何使其响应或假设下面出现另一个组件(页脚)？那么如何重新调整 ChatWindowComponent 呢？

所有硬编码的 CSS 都使用固定的吗？

关于如何在 Angular 中正确对齐所有内容有什么见解吗？

Answer 1

我认为您应该看看 css 网格。

使用 css 网格，您可以准确地告诉您的内容它应该使用多少空间，您甚至可以定义充当特定元素容器的区域

https://css-tricks.com/snippets/css/complete-guide-grid/