简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment résoudre le mystérieux espace vide en bas de page en CSS
P粉547362845
P粉547362845 2024-04-06 20:22:15
0
1
697

J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas comment me débarrasser de tous les espaces en bas. Je veux m'en débarrasser.

J'ai essayé de régler body和html的min-height à 100 % mais rien n'a fonctionné. Mon code est ici : https://github.com/eelegiap/thesis-code/tree/main/search

body {
    padding-left: 3vh;
    padding-top: 3vh;
    padding-bottom: 20px;
}

#searchCol {
    padding-left: 6vh
}

form {
    width: 25%
}

#results {
    padding-right: 10vh;
}

#resultsContainer {
    max-height: 30%;
    overflow-y: auto
}
.result {
    padding-left: 4vh;
}
.poemResult {
    cursor: pointer;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 5px;
}

#poemContainer {
    max-height: 30%;
    overflow-y: auto;
}
#poemMeta {
    padding-top: 10vh;
    padding-left: 15vh;
    padding-bottom: 5vh
}
#poemTxt {
    padding-left: 15vh;
    padding-bottom: 10vh;
}

.input-group {
    max-width: 75%;
    padding-bottom: 5vh
}

/* Tooltip text */
.titleTooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    text-align: left;
    width: fit-content;
    height: fit-content;
    padding: 2px;
    padding-right: 15px;
    font: 12px sans-serif;
    background: #e5ffff;
    border: 1px solid gray;
    border-radius: 8px;
    pointer-events: none;

    z-index: 1;
}

.titleTooltip:hover .tooltiptext {
    visibility: visible;
}

.token mark {
    display: contents;
}

input,
.dropdown-toggle {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.searchBar {
    min-height: 50px
}

#search {
    background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />

<body>
  <div class="container">
    <br>
    <div class="row">
      <h2>Contemporary Russian Internet Poetry</h2>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="row" id="poemContainer">
          <div id="poemMeta"></div>
          <div id="poemTxt"></div>
        </div>
      </div>
      <div class="col-sm-6" id="searchCol">
        <div class="row">
          <div class="input-group">
            <div class="form-outline flex-fill searchBar">
              <input type="search" id="form1" class="form-control form-control-lg" />
              <label class="form-label" for="form1">Search by keyword(s)</label>
            </div>
            <button type="button" id='search' class="btn searchBar">
              <i class="fas fa-search"></i>
            </button>
          </div>
        </div>
        <div class="row" id="resultsContainer">
          <div id="results"></div>
        </div>
      </div>
    </div>
  </div>
</body>

<!-- MDB -->

<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->

<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>

P粉547362845
P粉547362845

répondre à tous(1)
P粉762447363
P粉7624473632024-04-07 11:10:21 1 plancher

Vous utilisez padding-bottom: 20px; dans le texte. Il crée un remplissage inférieur ou un espace sur la partie inférieure de votre site Web.

Vous devez le supprimer.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！