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 rel="stylesheet" /> <link rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" /> <!-- 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>
您在正文中使用 padding-bottom: 20px;
。它在您網(wǎng)站的下側(cè)創(chuàng)建了底部填充或一些空間。
您必須將其刪除。