Как заставить мое приложение Angular 8 использовать весь видовой экран? - PullRequest
3 голосов
/ 18 февраля 2020

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

Главная страница со всеми ненужными пробелами The main page with all its unnecessary whitespace

код:

app.component. html

<body>
  <app-nav-menu></app-nav-menu>
  <div class="container" id="main-container">
    <router-outlet></router-outlet>
  </div>
</body>

стили. css

body {
height: 98vh;
width: 98vw;
}

html, body, .container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#main-container {
  background-image: url("src/assets/chicago-wallpaper.jpg");
  width: 98vw;
  height: 94vh;
}

Ответы [ 3 ]

1 голос
/ 18 февраля 2020

Тег body на странице html имеет заполнение по умолчанию.

Итак, вам нужно удалить это заполнение, добавив следующий код.

"style. css"

body {
   width: 100%;
   height: 100vh; /* This take the whole viewport height */

   margin: 0;
   padding: 0; /* Remove the default padding */
}
1 голос
/ 18 февраля 2020

Мэтью Аллен, похоже, дал смущающий простой ответ. Bootstrap применил правило максимальной ширины к .container и установил "max-width: none" в стилях. css позволяет карте заполнить страницу.

0 голосов
/ 18 февраля 2020

Если вы добавите float:left ко всем элементам в css, это может помочь.

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