如何讓我的 Angular 8 應用程序使用整個視口？
[英]How do I make my Angular 8 application use the whole viewport?
問題描述
我正在開發一個單頁應用程序，它由一個導航欄和一個顯示在導航欄中選擇的組件的路由器插座組成。 默認加載的主要組件是 Leaflet 地圖，我想填充除導航欄之外的整個頁面。 目前我什至無法讓主要組件填滿整個頁面，因為它堅持在兩側包含空白。 我已將容器設置為具有高分辨率背景圖像，以便我可以看到它實際填充了多少空間。
帶有所有不必要的空白的主頁
編碼：
應用程序組件.html
<body>
<app-nav-menu></app-nav-menu>
<div class="container" id="main-container">
<router-outlet></router-outlet>
</div>
</body>
樣式文件
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
馬修艾倫似乎提供了令人尷尬的簡單答案。 Bootstrap 已經對 .container 應用了最大寬度規則，並在 style.css 中設置“max-width: none”讓地圖填充頁面。
解決方案2
1 2020-02-18 15:00:44
html 頁面中的 body 標簽具有默認填充。
因此，您需要通過添加以下代碼來刪除該填充。
“樣式.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 中可能有幫助的所有元素。
如何使最大寬度的居中div使用視口，以使其在移動設備上顯示為全角？
[英]How do I make my centered div with a max width use a viewport so that it appears full-width on mobile devices?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.