javascript - 如何在我的 html 页面底部删除多余的空白空间和滚动条？

Question

我正在尝试使用 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;">&nbsp;</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>

所以基本上:如何确保页面将采用屏幕的形状和大小而不在底部/侧面添加任何额外空间/滚动条？

Answer 1

溢出是由 left_navbar 引起的，当您为高度分配 100vh 时，您应该考虑页眉和可能会导致溢出的页面增加高度的额外内容，因此您可以使用 calc(100vh - headerHeight) 设置高度值让我们说 40px为此，首先你应该为 html 和 body 边框设置 box-sizing

* {
  box-sizing: border-box;
}

.left_navbar {
  height: calc(100vh - 40px);
}

或者您可以在为其父元素(.main_dashboard_container)设置适当的高度值后将其设置为 100%