Угловой нижний колонтитул с начальной загрузкой4 - PullRequest
Новая
       1

Угловой нижний колонтитул с начальной загрузкой4

0 голосов
/ 01 октября 2019

Я изучаю angular7 и создаю липкий нижний колонтитул. Я пробовал много решений.

Я пробовал:

Никто не работает для меня. Я не понимаю почему, и мне нужна помощь.

У меня есть этот код после удаления всего, что я пробовал:

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html (только тело) 

<!doctype html>
<html lang="en">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html 

<app-menu></app-menu>

<main class="container">
  <router-outlet></router-outlet>
</main>

<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

footer.component.html 

<footer>
  &copy; 2019 - Zackna
</footer>

Редактировать: я обновляю свои коды с помощью ответа @avcajaraville, который я уже пробовал, но удалил ^ - ^. И есть мой результат , поскольку вы можете видеть, что мой нижний колонтитул не прилипает к нижней части страницы.

Существует ли собственное решение для начальной загрузки? Мой нижний колонтитул не имеет определенной высоты. Что мне нужно сделать, чтобы достичь своей цели?

Ответы [ 2 ]

0 голосов
/ 02 октября 2019

Спасибо @avcajaraville за ответ. К сожалению, я пропустил класс h-100, когда попробовал его, и я не вижу i: /

Тем временем я нашел решение.

Я добавил этот CSS в свое приложение-корневой компонент: 

app-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

и flex-grow: 1; для моего класса контейнера.

0 голосов
/ 01 октября 2019

В соответствии с примерами кода вы не добавляете нужные вам классы.

Это можно исправить, имитируя ту же структуру, что и в приведенном вами примере:

index.html 

<!doctype html>
<html lang="h-100">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html 

<app-menu></app-menu>
<main class="container">
  <h1>title</h1>
  <router-outlet></router-outlet>
</main>
<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

Я думаю, что это даст вам ожидаемое поведение.

В общем, при работе с CSS-фреймворком вам нужноиспользовать классы, указанные в вашем HTML. В противном случае CSS не может быть применен.

РЕДАКТИРОВАТЬ

Я добавил необходимый класс в HTML-тег в вашем файле index.html и рефакторинг app.component.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...