How to remove extra empty space and scroll bar at the bottom of my html page?

Question

I am trying to remove the empty space at the bottom as well as the scroll bar on the side of my html page with css.

I want for the page to adapt to the screen without adding that extra space at the bottom of the page/and scroll bar on the side.

I have set both margin and padding to 0 in the html and set the html and body to 100, but still getting empty space at the bottom.

@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>

So basically: how to make sure that the page will take the shape and size of the screen without adding any extra space at the bottom/and scroll bar on the side?

Answer 1

the overflow is caused by left_navbar, when you assign 100vh for the height you should consider the header and extra stuff that might add height to the page which causes overflow, so you can set a height value with calc(100vh - headerHeight) lets say 40px for it and before all you should set box-sizing for the html and body borders

* {
  box-sizing: border-box;
}

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

or you can set it to 100% after setting a proper height value to its parent element (.main_dashboard_container)

Answer 2

To remove the horizontal scrollbar, remove the body width

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: thick solid red;
}

To remove the vertical scrollbar, adjust the height like this

.left_navbar {
  height: 89vh;
  flex: 1;
  background-color: #1d293e;
}