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

html5 • • 问答 • 186 阅读

我正在尝试使用 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>
      <div>
        <img src="images/logo.png" alt="">
      </div>
      <div>
        <form action="">
          <select name="emirate">
            <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>
      <div>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contacts</a></li>
        </ul>
      </div>
      <div>
        <button>Login</button>
      </div>
      <div>
        <button>Place Your Ad</button>
      </div>
    </div>
    <! -- HEADER RIGHT SIDE CONTAINER STOP -->
  </header>
  <! -- HEADER STOP -->
  <!--############################################################################
################################################################################
################################################################################
################################################################################-->
  <div>
    <div>
      <div>
        <ul>
          <li><span>&nbsp;</span></li>
          <li><i></i>Dashboard</li>
          <li><i></i>Profile</li>
          <li><i></i>My Properties</li>
          <li><i></i>Messages</li>
          <li><i></i>Settings</li>
        </ul>
      </div>
    </div>
    <div>Content Here</div>
  </div>
  <script src="main.js"></script>
</body>

</html>

回答

溢出是由 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%

以上是如何删除我的html页面底部的多余空白和滚动条？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容