Heim  >  Fragen und Antworten  >  Hauptteil

So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS

Ich versuche, eine einfache Webseite mit Bootstrap und D3 zu erstellen, weiß aber nicht, wie ich all die Leerzeichen am unteren Rand entfernen kann. Ich möchte es loswerden.

Ich habe versucht, bodyhtmlmin-height auf 100 % zu setzen, aber nichts hat funktioniert. Mein Code ist hier: 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粉547362845P粉547362845215 Tage vor691

Antworte allen(1)Ich werde antworten

  • P粉762447363

    P粉7624473632024-04-07 11:10:21

    您在正文中使用 padding-bottom: 20px; 。它在您网站的下侧创建了底部填充或一些空间。

    您必须将其删除。

    Antwort
    0
  • StornierenAntwort