Heim > Fragen und Antworten > Hauptteil
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>