Comment supprimer un espace vide supplémentaire et une barre de défilement en bas de ma page html?

SkylerX Publié le Dev

SkylerX

J'essaie de supprimer l'espace vide en bas ainsi que la barre de défilement sur le côté de ma page html avec css.

Je veux que la page s'adapte à l'écran sans ajouter cet espace supplémentaire en bas de la page / et la barre de défilement sur le côté.

J'ai mis la marge et le remplissage à 0 dans le html et le html et le corps à 100, mais j'ai toujours un espace vide en bas.

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

Donc en gros: comment s'assurer que la page prendra la forme et la taille de l'écran sans ajouter d'espace supplémentaire en bas / et barre de défilement sur le côté?

Purva shukla

Pour supprimer la barre de défilement horizontale, supprimez la largeur du corps

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

Pour supprimer la barre de défilement verticale, ajustez la hauteur comme ceci

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

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le2021-01-27

laisse moi dire quelques mots

0commentaires

connexionAprès avoir participé à la revue

Article précédent:UNITY - Tirez un projectile dans la direction de l'arme à feu

TOP liste

article

Comment supprimer un espace vide supplémentaire et une barre de défilement en bas de ma page html?

Comment supprimer un espace vide supplémentaire et une barre de défilement en bas de ma page html?

Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

Comment afficher du texte au milieu de div avec une couleur d'arrière-plan différente?

Résultat de l'échantillonneur JMeter : comprendre le temps de chargement, le temps de connexion et la latence

Modbus Python Schneider PM5300

Pourquoi Object.hashCode () ne suit pas la convention du code Java

Comment faire une recherche partielle et obtenir un score pertinent dans Elasticsearch

Existe-t-il un moyen de voir si mon bot est hors ligne ?

Comment choisir le nombre de fragments et de répliques Elasticsearch

optimiser les opérations du serveur avec elasticsearch: traitement des filigranes de disque bas

Comment changer la couleur de la police dans R?

Autocomplete avec java, Redis, Recherche élastique, Mongo

MasterService d'ElasticSearch prend trop de temps pour calculer l'état du cluster et lancer ProcessClusterEventTimeoutException

Comment vérifier si un utilisateur spécifique a un rôle? Discord js

Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

Comment analyser un hachage Ruby plat en un hachage imbriqué?

Comment créer une nouvelle application dans Dropbox avec des autorisations complètes

Quelque chose dans le cluster Elasticsearch 7.4 devient de plus en plus lent avec les délais de lecture de temps en temps

Ajustement non linéaire avec R

php ajouter et fusionner des données de deux tables

Exporter la table de l'arborescence vers CSV avec mise en forme

帶有 Spring Boot 和 Azure AD 的 KeyCloak