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？如何使其响应或假设下面还有一个组件（页脚）？那我该如何再次调整ChatWindowComponent呢？

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

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

Answer 1

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

使用css网格，您可以准确地告诉您的内容应该使用多少空间，甚至可以定义区域，这些区域就像某个元素的容器一样

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

Answer 2

好吧，我不知道CSS网格类。菲利克斯的回答帮助了我很多。我觉得这是处理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;
}

我的最终输出是这样的。

我想说，Grid系统真的是一种很好的方式来查看CSS中的内容。它在Angular中非常强大且非常有效，我希望它是最好的方法。

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

2 个答案: