Я занимаюсь разработкой одностраничного приложения, состоящего из панели навигации и розетки маршрутизатора, которая отображает компонент, выбранный в панели навигации. Основной компонент, который загружается по умолчанию, - это карта Leaflet, которую я хотел бы заполнить всей страницей, кроме панели навигации. В настоящее время я не могу даже заставить основной компонент заполнить всю страницу, поскольку он настаивает на включении пробелов по бокам. Я установил для контейнера фоновое изображение с высоким разрешением, чтобы видеть, сколько места он фактически заполняет.
Главная страница со всеми ненужными пробелами ![The main page with all its unnecessary whitespace](https://i.stack.imgur.com/eGYow.jpg)
код:
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;
}