Question

6

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

rated 0 times [ 11] [ 5] / answers: 1 / hits: 5984 / 3 Years ago, wed, january 20, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Angular: serialize/unserialize in JSON HttpRequest and HttpResponse object

Wed, Aug 12, 20, 00:00, 4 Years ago

View All

answered 3 Years ago adam · Accepted Answer

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;

}