Как убрать странный пробел между угловым приложением и концом тела?

#html #css #angular

#HTML #css #angular

Вопрос:

под моим угловым приложением есть странное пространство. Пробел является частью тега body, но он не является частью тега app-root. Как я могу удалить этот пробел?

 /*styles.css*/
@import './styles/themes.scss';

@include mat-core();
@include angular-material-theme($material-light-theme);

.dark-theme{
    @include angular-material-color($material-dark-theme);
}

html, body { height: 100%; }
body { margin: 0; font-family: Verdana, Roboto, "Helvetica Neue", sans-serif; }

Я уже пробовал это в своем приложении-компоненте, но это не возымело никакого эффекта.

 app-component.css
:host {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

 /*app-component.scss*/
bg-intranet-header {
    z-index: 2;
    position: sticky;
    top: 0;
}

Я протестировал его в двух браузерах (firefox, edge). вот 3 скриншота фактического интерпретируемого css.

Ответ №1:

В styles.css (или styles.scss, ..) вы помещаете:

 body {
  margin: 0;
}

Это должно быть в этом конкретном файле.
Если это не сработает, попробуйте:

 body {
  margin: 0 !important;
}

1. Вы были быстрее меня, собирались опубликовать именно это.

2. Я уже делал это, как вы можете видеть в моем примере. Я попытался добавить ключевое слово important, но это тоже не работает.

3. В этом случае просто проверьте свое приложение (например, с помощью F12 в Google Chrome). Попробуйте элемент body и посмотрите, есть ли поле.. Возможно, элементы внутри вашего тела просто не имеют 100% высоты.

4. Я сделал, но из-за некоторого странного поведения тело и html-тег имеют относительный размер 100%, но html «длиннее», как показано на скриншоте выше.

5. Можете ли вы опубликовать: styles.css app.component.css полное содержимое, пожалуйста, чтобы я мог попробовать локально? Я только что попробовал базовое приложение angular и поместил код te в свой ответ в файле scss, и он работает так, как задумано.. должна быть какая-то другая проблема. Также укажите, какой браузер вы используете, пожалуйста.

Ответ №2:

Попробуйте добавить этот css

css

 body {
      margin: 0px !important;
      padding : 0px !important;
    }

* {
    box-sizing: border-box;
  }

надеюсь, я буду работать нормально!

1. Хорошо, теперь не могли бы вы создать свою проблему для Stakbliz? bcz без кода или файлов, которые мы не можем сказать правильно….

2. если этот проект angular связан с github, вы можете отправить ссылку на репозиторий! тогда я исправлю 100%

3. Это собственный проект, и мне не разрешено публиковать больший объем исходного кода в Интернете.