html - 尽管最小高度为 0，但 Div 在空时仍具有高度

Question

我正在尝试设计一个 div 的样式，以便调整其高度以适合其中的文本(前提是它不超过其最大高度)。问题是当 div 中没有文本时，div 仍然有一定的高度。

#container {
   width: 80%;
   margin-left: 10%;
   position: absolute;
   bottom: 0;
 }

 #input {
   width: 85%;
   float: left;
 }

 #submit {
   width: 15%;
   display: inline;
   float: right;
 }

 #display {
    display: inline-block;
    margin: 0;
    min-height: 0;
    max-height: 200px;
    width: 100%;
    overflow: scroll;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="form-group">
    <label for="usr">Terminal:</label><br>
    <input type="text" class="form-control" id="input">
    <button class="btn btn-primary" id="submit">Submit</button>
    <div id="display"></div>
  </div>

我也试过使用 height:0; max-height:200; 但这有相同的结果，当 div 中没有文本时，它仍然有高度并且没有完全消失。

(我正在使用 Bootstrap 4，以防相关)

Answer 1

确保 #display 上的 padding: 0 并在没有 overflow: auto 的情况下尝试。 也试试 box-sizing: border-box