如何让我的 Angular 8 应用程序使用整个视口？
[英]How do I make my Angular 8 application use the whole viewport?
问题描述
I am developing a single-page application consisting of a navbar and a router-outlet which displays the component selected in the navbar.
我正在开发一个单页应用程序，它由一个导航栏和一个显示在导航栏中选择的组件的路由器插座组成。 The primary component which loads by default is a Leaflet map which I would like to fill the entire page aside from the navbar.默认加载的主要组件是 Leaflet 地图，我想填充除导航栏之外的整个页面。 Currently I cannot even get the main component to fill the whole page, as it insists on including white space on the sides.目前我什至无法让主要组件填满整个页面，因为它坚持在两侧包含空白。 I've set the container to have a high-res background image so I can see how much space it is actually filling.我已将容器设置为具有高分辨率背景图像，以便我可以看到它实际填充了多少空间。
The main page with all its unnecessary whitespace带有所有不必要的空白的主页
The code:编码：
app.component.html应用程序组件.html
<body>
<app-nav-menu></app-nav-menu>
<div class="container" id="main-container">
<router-outlet></router-outlet>
</div>
</body>
styles.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
2 已采纳 2020-02-18 15:16:13
Matthew Allen seems to have supplied the embarrassingly simple answer.马修艾伦似乎提供了令人尴尬的简单答案。 Bootstrap had applied a max-width rule to .container, and setting "max-width: none" in styles.css lets the map fill the page. Bootstrap 已经对 .container 应用了最大宽度规则，并在 style.css 中设置“max-width: none”让地图填充页面。
解决方案2
1 2020-02-18 15:00:44
The body tag in your html page has a default padding. html 页面中的 body 标签具有默认填充。
So, you need to remove that padding by adding the following code.因此，您需要通过添加以下代码来删除该填充。
"style.css" “样式.css”
body {
width: 100%;
height: 100vh; /* This take the whole viewport height */
margin: 0;
padding: 0; /* Remove the default padding */
}
解决方案3
0 2020-02-18 14:46:33
如果您将float:left添加到 css 中可能有帮助的所有元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.