How do I make my Angular 8 application use the whole viewport?
Question
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. 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
<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 answers
solution1
2 ACCPTED 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.
solution2
1 2020-02-18 15:00:44
The body tag in your html page has a default padding.
So, you need to remove that padding by adding the following code.
"style.css"
body {
width: 100%;
height: 100vh; /* This take the whole viewport height */
margin: 0;
padding: 0; /* Remove the default padding */
}
solution3
0 2020-02-18 14:46:33
如果您将float:left添加到 css 中可能有帮助的所有元素。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.