如何刪除 html 頁面底部多余的空白空間和滾動條？
[英]How to remove extra empty space and scroll bar at the bottom of my html page?
問題描述
我正在嘗試使用 css 刪除底部的空白空間以及 html 頁面側面的滾動條。
我希望頁面適應屏幕，而無需在頁面底部添加額外的空間/並在側面添加滾動條。
我在 html 中將邊距和填充都設置為 0，並將 html 和主體設置為 100，但底部仍然有空白空間。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); * { margin: 0; padding: 0; /* border: thick solid blue;*/ font-family: 'Roboto', sans-serif; } html { height: 100%; border: thick solid yellow; } body { height: 100%; width: 100%; display: flex; flex-direction: column; border: thick solid red; /* background-color: #1d293e;*/ } /*BUTTON BACKGROUND COLORS*/.header_right_container_inner_center_button, .header_right_container_inner_right_button { background-color: #FF0000; } /*BUTTON HOVER COLORS*/.header_right_container_inner_right_button:hover, .header_right_container_inner_center_button:hover { background: #F23D3D; } /* BUTTON FONT COLORS*/.header_right_container_inner_center_button, .header_right_container_inner_right_button { color: white; } a { text-decoration: none; }.logo { width: 120px; border-radius: 50%; } /* HEADER START */ header { display: flex; /* border: thick solid red;*/ justify-content: center; border-bottom: thin solid black; padding: 9px; } /* HEADER LEFT SIDE */.header_left_container { display: flex; flex: 1; /* border: thick solid yellow;*/ justify-content: center; }.header_left_container_inner_left { /* border: thick solid green;*/ display: flex; flex: 1; align-items: center; justify-content: center; }.header_left_container_inner_right { /* border: thick solid green;*/ display: flex; flex: 5; align-items: center; justify-content: flex-start; } /* HEADER RIGHT SIDE */.header_right_container { display: flex; flex: 1; /* border: thick solid yellow;*/ justify-content: center; }.header_right_container_inner_left { display: flex; /* border: thick solid green;*/ flex: 4; justify-content: center; align-items: center; } li { /* display:inline;*/ padding: 10px; } a { color: black; }.header_right_container_inner_left_list { display: flex; flex: 1; justify-content: flex-end; list-style-type: none; }.header_right_container_inner_center { display: flex; /* border: thick solid green;*/ flex: 1; justify-content: center; }.header_right_container_inner_center_button { display: flex; align-items: center; /* background-color: #E00000;*/ border: 1px solid #e00000; border-radius: 6px; padding: 0 25px; margin-left: 12px; /* color: white;*/ font-size: 15px; font-weight: 333; text-decoration: none; cursor: pointer; white-space: nowrap; resize: none; outline: none; }.header_right_container_inner_right { display: flex; /* border: thick solid green;*/ flex: 1; justify-content: center; }.header_right_container_inner_right_button { display: flex; align-items: center; /* background-color: #E00000;*/ border: 1px solid #e00000; border-radius: 6px; padding: 0 25px; margin-left: 12px; /* color: white;*/ font-size: 15px; font-weight: 333; text-decoration: none; cursor: pointer; white-space: nowrap; resize: none; outline: none; } select.select_city_header { border: 1px solid #fff; /* background-color: rgba(255,255,255,.5);*/ padding: 5px; background-color: white; color: black; }.main_dashboard_container { display: flex; color: white; /*border: thick solid red;*/ }.left_navbar { height: 100vh; flex: 1; /*border: thick solid green;*/ background-color: #1d293e; }.right_content { flex: 4; /*border: thick solid yellow;*/ }.dashboard_buttons { font-family: 'Lato', sans-serif; padding: 12px 50px; font-size: 16px; font-weight: 500; border-bottom: thin solid black; cursor: pointer; background-color: #1d293e; }.dashboard_buttons:hover { background-color: #39CCCC; color: white; }.right_content { background-color: white; }.ul_flex { display: flex; flex-direction: column; flex-wrap: nowrap; }
<:DOCTYPE html> <html lang="en"> <head> <script src="https.//kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <link href="/css/all.css" rel="stylesheet"> <:--load all styles --> <title>Index</title> </head> <body> <; -- HEADER START --> <:--############################################################################ ################################################################################ ################################################################################ ################################################################################--> <header> <; -- HEADER LEFT SIDE CONTAINER START --> <div class="header_left_container"> <div class="header_left_container_inner_left"> <img class="logo" src="images/logo:png" alt=""> </div> <div class="header_left_container_inner_right"> <form action=""> <select class="select_city_header" name="emirate" id="emirate" style="border: 0:"> <option value="dubai">Dubai</option> <option value="abu_dhabi">Abu Dhabi</option> </select> </form> </div> </div> <: -- HEADER LEFT SIDE CONTAINER STOP --> <: -- HEADER RIGHT SIDE CONTAINER START --> <div class="header_right_container"> <div class="header_right_container_inner_left"> <ul class="header_right_container_inner_left_list"> <li><a href="#" style="text-decoration; none;">Home</a></li> <li><a href="#" style="text-decoration: none">About</a></li> <li><a href="#" style="text-decoration; none">Projects</a></li> <li><a href="#" style="text-decoration: none">Team</a></li> <li><a href="#" style="text-decoration; none">Contacts</a></li> </ul> </div> <div class="header_right_container_inner_center"> <button class="header_right_container_inner_center_button">Login</button> </div> <div class="header_right_container_inner_right"> <button class="header_right_container_inner_right_button">Place Your Ad</button> </div> </div> <: -- HEADER RIGHT SIDE CONTAINER STOP --> </header> <; -- HEADER STOP --> <:--############################################################################ ################################################################################ ################################################################################ ################################################################################--> <div class="main_dashboard_container"> <div class="left_navbar"> <div class="sub"> <ul class="ul_flex"> <li class="dashboard_user_widget"><span class="span" style="min-height;350px:"> </span></li> <li class="dashboard_buttons"><i class="fas fa-map-marker-alt" style="padding-right.9px;"></i>Dashboard</li> <li class="dashboard_buttons"><i class="far fa-user" style="padding-right:9px;"></i>Profile</li> <li class="dashboard_buttons"><i class="far fa-list-alt" style="padding-right:9px;"></i>My Properties</li> <li class="dashboard_buttons"><i class="far fa-heart" style="padding-right:9px;"></i>Messages</li> <li class="dashboard_buttons"><i class="fas fa-cogs" style="padding-right:9px;"></i>Settings</li> </ul> </div> </div> <div class="right_content">Content Here</div> </div> <script src="main.js"></script> </body> </html>
所以基本上：如何確保頁面將采用屏幕的形狀和大小而不在底部/側面添加任何額外空間/滾動條？
2 個解決方案
解決方案1
7 2021-01-20 13:59:50
溢出是由 left_navbar 引起的，當您為高度分配 100vh 時，您應該考慮 header 和可能增加頁面高度導致溢出的額外內容，因此您可以使用 calc(100vh - headerHeight) 設置高度值讓我們說 40px為此，首先您應該為 html 和正文邊框設置 box-sizing
* {
box-sizing: border-box;
}
.left_navbar {
height: calc(100vh - 40px);
}
或者您可以在為其父元素（.main_dashboard_container）設置適當的高度值后將其設置為 100%
解決方案2
1 已采納 2021-01-20 13:46:32
要刪除水平滾動條，請刪除正文寬度
body {
height: 100%;
display: flex;
flex-direction: column;
border: thick solid red;
}
要刪除垂直滾動條，請像這樣調整高度
.left_navbar {
height: 89vh;
flex: 1;
background-color: #1d293e;
}
如何在HTML頁面底部刪除多余的空間
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.