простая CSS Grid, испорченная вертикальной полосой прокрутки - PullRequest
Новая
       9

простая CSS Grid, испорченная вертикальной полосой прокрутки

0 голосов
/ 07 июня 2018

мое угловое приложение, которое выложено с помощью CSS Grid, имеет вертикальную полосу прокрутки на том, что выглядит как тело.Я поместил нулевое поле на тело, и мои строки шаблона сетки в сумме до 100. Я не знаю, какие другие факторы могут быть причиной этого.Вот мой стек образец .

Вот код, который может быть проблематичным: 

body{
    margin:0px !important;
}

#page {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-areas: "head head"
                         "nav  main"
                         "nav  foot";
    grid-template-rows: 10vh 90vh;
    grid-template-columns: 250px 1fr;
  }

Спасибо за ваши идеи!

Ответы [ 3 ]

0 голосов
/ 07 июня 2018
У тега

body есть поле по умолчанию.

Либо удалите поля, добавив поле: 0 в теге body.

Или обновите стиль #page, который учитывает поле по умолчанию для телатег 

grid-template-rows: calc(10vh - 8px) calc(90vh - 8px);
0 голосов
/ 07 июня 2018

Причина, по которой ваш стиль в app.component.css не применяется, поскольку angular будет применять стиль, указанный вами, только к этому конкретному компоненту.Итак, какой бы стиль вы ни указали в app.component.css, он будет применяться только к app.component.html.Это сделано для того, чтобы убедиться, что CSS, примененный вами в одном компоненте, не влияет на стилизацию какого-либо другого компонента.

Поскольку <body> является частью index.html, вам необходимо указать 

body{
    margin:0px;
}

в styles.css.Вы можете считать это глобальным стилем.

Редактировать: В вашем index.html, даже если тег body отсутствует, angular добавит эти теги html, head и body, так какон должен вставить скомпилированные скрипты на страницу индекса.

0 голосов
/ 07 июня 2018

Вам нужно:

html, body { margin: 0; }

...