Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, wie ich alle Leerzeichen am unteren Rand entfernen kann. Ich möchte es loswerden. Ich habe versucht, die Mindesthöhe von Body und HTML auf 100 % zu setzen, aber nichts hat funktioniert. Mein Code ist hier: https://github.com/eelegiap/thesis-code/tree/main/searchbody{padding-left:3vh;padding-top:3vh;paddin

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

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, body和html的min-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粉547362845259 Tage vor810

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

Antworte allen(1)Ich werde antworten