Как правильно все выровнять в 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 и запустил 100% -ную высоту окна из ChatWindowComponent (контейнер).

Я пытался использовать функции calc для расчета высоты, но без вены.

Есть ли лучший подход для этого?потому что я не могу всегда вычислять высоту nav-bar.component .это может варьироваться.

Есть ли лучший способ понимания Angular с точки зрения CSS?Как сделать его отзывчивым или предположить, что еще один компонент появится ниже (нижний колонтитул)?Тогда как мне снова настроить ChatWindowComponent?

Исправлено ли все жестко запрограммированное CSS?

Есть какие-нибудь идеи о том, как правильно все выровнять в Angular?

Answer 1

Ну, я не знал о классах сетки 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, и я надеюсь, что это лучший подход.

Answer 2

Я думаю, вам следует взглянуть на CSS-сетки.

С помощью CSS-сеток вы можете точно указать своему контенту, сколько места ему нужно использовать, и вы даже можете определить области, которые действуют как контейнер для определенного элемента.

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