如何在 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>

但我想将这个红色组件扩展到屏幕底部。使该组件的大小为全窗口。 所以我将引导类.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？如何使其响应或假设下面（页脚）又出现了一个组件？那么如何再次调整 ChatWindowComponent 呢？

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

关于如何在 Angular 中正确对齐所有内容的任何见解？

Answer 1

嗯，我不知道 CSS 网格类。 Felix 的回答对我帮助很大。 我觉得这是处理 Angular 代码的一种非常好的方法，尤其是所有组件，有时甚至是相互嵌套的。

我的方法如下。

.nav-bar {
    grid-area: nav; 
}

.chat-window {
    grid-area: cwindow; 
} 
.main-page {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; 
    grid-template-rows: [row1-start] auto [row2-start] calc(100vh - 72px);
    grid-template-areas: 

      "nav nav nav nav"
      "cwindow cwindow cwindow cwindow"; 
}

如您所见，我使用了网格方法并声明了固定高度的布局，然后我将组件放入 div 中，就像这样。

<div class="bg-dark main-page ">
  <div class="nav-bar">
    <app-nav-bar></app-nav-bar>
  </div>
  <div class="chat-window">
    <app-chat-window></app-chat-window>
  </div>
</div>

然后在相应的组件中，我可以再次声明网格布局并进行操作。网格容器内的height:100% 使组件也可以垂直响应。

现在这是我的聊天窗口组件。

.full-height {
   height: 100%;
}

.box {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto 40px;
    grid-template-areas: 
      "mwindow mwindow owindow owindow owindow owindow"
      "mbox mbox owindow owindow owindow owindow"
}
.message-window{
    grid-area: mwindow;
}
.message-box{
    grid-area: mbox;
}
.output-window{
    grid-area: owindow;
}

我的最终输出是这样的。

我想说，网格系统确实是一种在 CSS 中查看事物的好方法。它在 Angular 中非常强大且非常有效，我希望这是最好的方法。

Answer 2

我认为你应该看看 CSS 网格。

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

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