Фон не занимает всю страницу Angular CSS - PullRequest
Новая
       0

Фон не занимает всю страницу Angular CSS

0 голосов
/ 30 января 2019

Простой вопрос, который может помочь мне задать более сложную проблему, которую я сейчас не буду здесь объяснять.

Знаете ли вы, почему красный цвет не занимает весь фон страницы?

https://stackblitz.com/edit/angular-hp237w?embed=1&file=src/app/app.component.html

Конечно, в моей проблеме я не хочу изменять файлы 'index.html' и 'style.css'

Заранее спасибо, приятногодень

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Ваш background-color: red применяется только к вашему div, который по умолчанию имеет высоту, равную общей высоте элементов в нем.Для того, чтобы занять всю страницу, вам нужно установить высоту 100vh 

.back {
  height: 100vh;
  background-color: red;
}
0 голосов
/ 30 января 2019

Элемент родительского блока, в данном случае <body>, не имеет высоты 100%.Он также имеет по умолчанию определенный запас.Родитель блока элемента body также не имеет установленной высоты.Это тег <html>.Вы можете исправить это двумя способами, если вы не хотите редактировать глобальный файл CSS:

Добавьте это в свой компонент CSS, что довольно уродливо и так неодобрительно относится к 

::ng-deep body,
::ng-deep html {
  height:100%;
  margin: 0;
}

.back {
  height: 100%;
}

Другой способ - сделать позицию абсолютной.Эта работа, потому что относительным родителем элемента является <html> element viewport: 

.back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...